1

我做了一个简单的循环来演示我的问题：

  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/ <- 工作示例，看看吧！

为什么？

4

2 回答 2

2

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

从用户的角度来看，浏览器将被锁定直到 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()函数将一个函数的执行排队等待稍后执行，从而允许当前函数完成，进而允许浏览器重新绘制屏幕。

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

于 2012-11-01T04:39:21.253 回答
0

这是我的尝试（与第一个答案基本相同，尽管是独立得出的，但具有立即调用的匿名函数（IIAF）：

小提琴

(function() {
    var i = 1,
        list = document.getElementById('list');
        list.innerHTML = "";
    function addToList() {
         if (i < 16) {
             list.innerHTML += "<li>" + i + "</li>";
             i++;
             window.setTimeout(addToList, 300);
         }
    }
    addToList();
})();​
于 2012-11-01T05:26:15.207 回答