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函数所做的就是在100ms内阻止所有东西，它不会让浏览器做任何其他事情，比如更新它的UI (例如，不会“让步”)。

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

循环使用了新的循环；但请注意，它是not widely-supported yet.

• Make

1. ，一个通过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-15ms)。

Answer 2

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

$(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);
});​