Question

我确定之前已经被问了1000次，基本上我想要做的就是更改页面元素的内容以显示加载消息，同时我的其他javascript代码（资源非常密集）完成。问题是在“其他JS处理”完成之后，消息不会显示，从而完全违背其目的。一个简化的例子......

<html>
<head>
    <title> crappity crapness </title>
    <script type="text/javascript">
        function showMessage(){
            document.getElementById("content").innerHTML = "please wait while we waste some time";
        }

        function wasteTime(){
            //alert("oh joy");
            pausecomp(3000);
            //alert("marvelous!");
        }

        function pausecomp(millis) 
        {
            var date = new Date();
            var curDate = null;

            do { curDate = new Date(); } 
            while(curDate-date < millis);
        } 

    </script>
</head>
<body>
    <div id="content">Blah</div>
    <br/>
    <a href="http://www.google.com" onclick="showMessage(); wasteTime();"> link </a>
</body>

如果我取消注释“哦欢乐”警报，则div中的文本会立即更新。如何在没有警报的情况下使其正常工作？

我知道我必须错过一些简单的事情。感谢

Answer 1

听起来你反对Javascript是单线程的事实，但浏览器不是。

基本上，您不能同时运行多个Javascript。但是，浏览器仍然必须执行除执行Javascript之外的操作，并在可能的情况下继续执行此操作。问题是没有定义修改DOM是同步的（即JS执行停止直到完成）还是异步（JS执行继续）。大多数浏览器都使用后者。但JS执行仍然具有相当高的优先级，并且许多DOM更新被推迟到JS执行必须停止并等待。警报框是一个很好的例子，因为它正在等待用户输入。

做你想做的事情的方法是利用setTimeout()让当前的JS完成，浏览器可以完成更新DOM，然后它可以执行JS等待运行超时。

Answer 2

如果可以的话，最好的方法是异步调用showMessage函数。在其他语言中，您可以使用线程执行此操作，而在HTML5中，您可以使用专为此类设计而设计的工作人员执行此操作，但是现在您可以最简单地使用setTimeout，这使得第一个参数中的代码在一定时间后执行，允许当前代码在执行之前执行。

更改

   onclick="showMessage(); wasteTime();"

到

   onclick="showMessage; setTimeout(wasteTime,5);">

Answer 3

由于while循环，您的pausecomp(3000)基本上阻止浏览器重绘。我会做这样的事情：

function wasteTime(){
    setTimeout(runNext, 3000);
}

function runNext(){
     alert("marvelous!");
}

js处理完成时的基本Javascript加载消息

3 个答案: