Javasript 函数更改一个 <div> 的 HTML 类，渲染，然后继续运行其余的函数代码

Question

我正在学习编程 HTML/CSS/Javascript。我创建了一个网页和一个 javascript 代码来获取 Access 数据库中的一些信息，然后将其呈现给用户。有时是一张大桌子。我只想在代码的开头和结尾更新一个类和一个innerHTML，以便向用户显示：“等等，页面正在加载”......在代码运行后，更改类和innerHTML没有（“”）那么给用户的消息就会消失。我做了代码，但是当我的函数运行时，它不会在函数完成之前呈现对 class 和 innerHTML 的更改......仅供参考：此时，HTML 已经呈现。Javascript 将通过单击页面上的按钮来执行。我的 HTML - 我想用 Javascript 代码更新的类和 innerHTML。    <section>        <div id="RunningCode" class="">            <span id="RunningCode1" class=""></span>        </div>      </section>我的JAVASCRIPT CODE在函数的开头。（这是我想在代码继续之前呈现/更新的内容var YellowCard = document.getElementById("RunningCode");YellowCard.className = "mensagemCodeRunning";var YellowCard1 = document.getElementById("RunningCode1");YellowCard1.className = "mensagemCodeRunningText";YellowCard1.innerHTML = "Loading. Please Wait..."然后我的JAVASCRIPT CODE在函数的末尾：YellowCard1.className = "";YellowCard1.innerHTML = ""YellowCard.className = "";

Answer 1

重绘发生在函数执行之后，如果您将正在执行的 javascript 代码包含在 setTimeout() 中，您将能够在代码开始执行之前重绘 DOM。

把这部分拉出来变成一个单独的函数

var YellowCard = document.getElementById("RunningCode");

YellowCard.className = "mensagemCodeRunning";

var YellowCard1 = document.getElementById("RunningCode1");

YellowCard1.className = "mensagemCodeRunningText";

YellowCard1.innerHTML = "Loading. Please Wait..."

像这样：

function run(){

    var YellowCard = document.getElementById("RunningCode");

    YellowCard.className = "mensagemCodeRunning";

    var YellowCard1 = document.getElementById("RunningCode1");

    YellowCard1.className = "mensagemCodeRunningText";

    YellowCard1.innerHTML = "Loading. Please Wait...";

    setTimeout(getSpecificSupplier(), 0);

    function getSpecificSupplier() { 

        // need to redefine these variables

        var YellowCard = document.getElementById("RunningCode");

        var YellowCard1 = document.getElementById("RunningCode1");

        var Carrier_Name = Carrier_NameHTML.value;

        var cn = new ActiveXObject("ADODB.Connection"); 

        ...

        YellowCard1.className = "";

        YellowCard1.innerHTML = ""

        YellowCard.className = "";

    }

}