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

Question

我正在学习编程 HTML/CSS/Javascript。我创建了一个网页和一个 javascript 代码来获取 Access 数据库中的一些信息，然后将其呈现给用户。有时它是一张大桌子。我只想在代码的开头和结尾更新一个类和一个innerHTML，以便向用户显示：“等待，页面正在加载”......在代码运行后，更改类和innerHTML什么都没有（“”）然后给用户的消息就会消失。

我做了代码，但是当我的函数运行时，在函数完成之前它不会呈现对类和 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..."

然后 My JAVASCRIPT CODE 在函数的末尾：

YellowCard1.className = "";
YellowCard1.innerHTML = ""

YellowCard.className = "";

完整的 JAVASCRIPT 代码：

function getSpecificSupplier() 
{ 

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

var YellowCard1 = document.getElementById("RunningCode1");
YellowCard1.className = "mensagemCodeRunningText";
YellowCard1.innerHTML = "Loading. Please Wait..."

var Carrier_Name = Carrier_NameHTML.value;

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

var strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = MySource;
var rs = new ActiveXObject("ADODB.Recordset"); 


var SQL = "select * from ...

cn.Open(strConn); 
rs.Open(SQL, cn); 

var Linhas_da_Tabela = document.getElementById("Apagando");

while(Linhas_da_Tabela.firstChild) {
    Linhas_da_Tabela.removeChild(Linhas_da_Tabela.firstChild);
}

while (!rs.eof) {

    var table = document.getElementById("mytable");
    var row = table.insertRow(-1);
    var cell0 = row.insertCell(0);
    var cell1 = row.insertCell(1);
    var cell2 = row.insertCell(2);
    var cell3 = row.insertCell(3);
    var cell4 = row.insertCell(4);
    var cell5 = row.insertCell(5);
    var cell6 = row.insertCell(6);
    var cell7 = row.insertCell(7);
    var cell8 = row.insertCell(8);


    cell0.innerHTML = rs1
    cell1.innerHTML = rs2
    cell2.innerHTML = rs3
    cell3.innerHTML = rs4

    var WholeDate = new Date(rs("Arrival Time"));
    var dd = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getDate());
    var mm = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMonth()+1);
    var yyyy = WholeDate.getFullYear();
    var hh = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getHours());
    var min = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMinutes());

    cell4.innerHTML = "" + mm + "-" + dd + "-" + yyyy + " " + hh + ":" + min + "h";

    var WholeDate = new Date(rs("Gate IN"));
    var dd = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getDate());
    var mm = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMonth()+1);
    var yyyy = WholeDate.getFullYear();
    var hh = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getHours());
    var min = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMinutes());

    cell5.innerHTML = "" + mm + "-" + dd + "-" + yyyy + " " + hh + ":" + min + "h";

    var WholeDate = new Date(rs("Dock IN"));
    var dd = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getDate());
    var mm = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMonth()+1);
    var yyyy = WholeDate.getFullYear();
    var hh = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getHours());
    var min = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMinutes());

    cell6.innerHTML = "" + mm + "-" + dd + "-" + yyyy + " " + hh + ":" + min + "h";

    var WholeDate = new Date(rs("Dock OUT"));
    var dd = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getDate());
    var mm = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMonth()+1);
    var yyyy = WholeDate.getFullYear();
    var hh = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getHours());
    var min = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMinutes());

    cell7.innerHTML = "" + mm + "-" + dd + "-" + yyyy + " " + hh + ":" + min + "h";

    var WholeDate = new Date(rs("Gate OUT"));
    var dd = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getDate());
    var mm = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMonth()+1);
    var yyyy = WholeDate.getFullYear();
    var hh = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getHours());
    var min = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMinutes());

    cell8.innerHTML = "" + mm + "-" + dd + "-" + yyyy + " " + hh + ":" + min + "h";

rs.MoveNext
}

rs.Close(); 
cn.Close(); 

YellowCard1.className = "";
YellowCard1.innerHTML = ""

YellowCard.className = "";


}

标签： javascripthtml

Answer 1

请参阅这篇文章： 在 javascript 运行时显示消息

重绘发生在函数执行之后，如果您将正在执行的 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 = "";


    }

}