Question

以下工作正常：

alert("start");
loadData(); // takes a while
alert("finished");

loadData（）是一种将大量数据插入DOM中的表并花费几秒钟的方法。

然而，这并不像预期的那样有效：

document.getElementById("mydiv").style.display = "block";
loadData(); // takes a while
document.getElementById("mydiv").style.display = "none";

数据加载到表中而不显示mydiv，直到加载完成，然后mydiv快速显示并消失。

但是这应该像它应该的那样：

document.getElementById("mydiv").style.display = "block";
alert("start");
loadData(); // takes a while
alert("finish");
document.getElementById("mydiv").style.display = "none";

显示

mydiv，显示警告对话框，数据加载到表中，然后mydiv按预期消失。

任何人都知道为什么上面的第二个代码部分无法正常工作？

Answer 1

我不知道确切的原因，但我能想到的是LoadData是一个繁重的函数，因此浏览器正在忙于评估它，因此它保存了渲染。当你在它之间发出警报时，它提供了足够的时间来渲染div，然后评估LoadData。

解决方法：

function LoadData()
{
//Show Div here
//window.setTimeout(newFunc,100);
}

function newFunc()
{
 //Do data operations here
 //Hide Div
}

Answer 2

将javascript视为将一些解释的代码插入到更大的程序中。较大的程序看起来有点像这样：

void eventLoop () {
   struct event event;
   while(event = getEvent()){
        runJavascript(event);
        runBrowserCode();
        if(viewHasChanged) {
           redrawViewRegions();
        }
   }

}

这根本不准确，但它给你一点点想法。当javascript代码正在运行时，浏览器没有做任何其他事情：包括更新视图。它没有达到那一点。浏览器gui不会在一个单独的异步线程中运行，与您想象的javascript并行运行。浏览器必须等待javascript完成才能执行任何操作。

当您使用警报时，您可以看到gui更新，因为，为了显示警报，您必须更新gui！所以这是一种特殊情况。

JavaScript执行顺序问题

2 个答案: