Javascript中的长任务

Question

为什么在following code 中我会一次看到整个页面？谢谢！

HTML：

<div></div>

CSS：

div {
    width: 100px;
    height: 300px;
    border: 1px solid black;
    text-align: center;
}

Javascript：

$(function() {
    for (var i=0; i<15; i++) {
        sleep(100);
        $("div").append("<span>--- " + i + " ---<br /></span>");
    }

    function sleep(milliseconds) {
        var start = new Date().getTime();
        for (var i = 0; i < 1e7; i++) {
            if ((new Date().getTime() - start) > milliseconds){
                break;
            }
        }
    }
});

Answer 1

因为 Web 浏览器上的 Javascript 是单线程的（尽管这种情况正在发生变化；见下文），并且几乎没有浏览器在（主）Javascript 线程繁忙时更新其 UI。您的所有sleep 函数所做的只是将所有内容阻止 100 毫秒，它不会让浏览器执行任何其他操作，例如更新其 UI（例如，不“屈服”）。

有几种方法可以做你想做的事情：

1. 使用新的web workers 东西；但请注意，它是not widely-supported yet。

2. 使您的循环成为一个通过setTimeout 调用自身的函数。这样一来，您的代码就会让位于浏览器并让它更新其 UI。

这是一个简单示例，说明如何将上面的#2 应用到代码中：

$(function() {
    var i;

    doOne();

    function doOne() {
        $("div").append("<span>--- " + i + " ---<br /></span>");
        if (i++ < 15) {
            setTimeout(doOne, 0);   // <== Won't really be zero, browsers clamp it at ~10
        }
    }

});

如果您有很多循环迭代（例如，几百次而不是 15 次），那么在每次迭代中进行大量循环而不是在每次迭代中让步可能是值得的；产量需要一段可测量的时间（通常约为 10-15 毫秒）。

Answer 2

由于 javascript 是单线程的，因此您需要将一些处理时间交给 UI，如下所示：

$(function() {
    function appendDiv(i) {
        $("div").append("<span>--- " + i + " ---<br /></span>");
        if(i < 14) 
            setTimeout(function() { appendDiv(i+1); }, 100);  
    }
    appendDiv(0);
});​

You can see a demo here

您也可以根据需要使用间隔，like this：

$(function() {
    var i = 0;
    var interval = setInterval(function() {
        $("div").append("<span>--- " + i++ + " ---<br /></span>");
        if(i == 15) clearInterval(interval);
    }, 100);
});​