javascript - 为什么这个循环在将每个结果添加到列表之前要等待完成？带 JSFiddle

Question

我做了一个非常简单的循环来演示我的问题:

  var listMaker = function() {
     document.getElementById('list').innerHTML = "";
     var i = 1;
     while (i < 150) {
        document.getElementById('list').innerHTML += "<li>" + i + "</li>";
        i++;
    }
};​

我认为此函数会立即开始打印到列表中，每次将每个数字加一个。

相反，它会等到完成，然后推送包含 150 个数字的完整列表。

http://jsfiddle.net/mholubowski/CFQ8K/1/ <- 工作示例，检查一下!

为什么？

Answer 1

浏览器运行 JS 并在同一线程上进行页面更新。这意味着它不会在您的函数运行时更新显示。所以从某种意义上说，项目是一次添加一个，但是在所有添加完成后重新绘制显示之前，您看不到它们。

从用户的 Angular 来看，浏览器将被锁定，直到 JS 完成，因此长时间运行的循环不是一个好主意。

您可以使用 setTimeout() 重写您的循环，然后您可以看到它们一次一个地出现在页面上。

var listMaker = function() {
    var list = document.getElementById('list'),
        i = 1;
    function doNext() {
        if (i < 150){
            list.innerHTML += "<li>" + i + "</li>";
            setTimeout(doNext, 100);
            i++;
        }
    }
    doNext();
};​

演示:http://jsfiddle.net/CFQ8K/2/

setTimeout() function将函数的执行排队等候，允许当前函数完成，进而允许浏览器重新绘制屏幕。

setTimeout() 的第二个参数是以毫秒为单位的延迟 - 显然您会根据您所追求的效果适本地设置它。