Question

我有一个for块，它迭代对象列表。每个对象的名称将显示在div（#console）中。

代码运行时，console.log实时输出。但是，似乎应该在for块完成后才执行将数据附加到#console的方法。

如何使doSomething（）也实时运行？

for(var i = 0; i < objectList.length; i++)
{
    console.log(objectList[i]); //  this runs immediately
    doSomething(objectList[i]); //  this runs only AFTER the loop completes
}

function doSomething(obj)
{
    $("#console").append(obj.name);
    // other stuff
}

Answer 1

您的代码会阻止DOM渲染直至执行完毕，这就是为什么只有在循环完成后才能看到#console渲染的原因。

您可以使用setTimeout来渲染DOM，然后执行以下操作：

var objectList = [{name: 'hello'}, {name: 'world'}];

function loopThroughList() {
  var i = 0;
  var loop = function () {
     if (i >= objectList.length) {
       return;
     }
     console.log(objectList[i]);
     doSomething(objectList[i]);
     setTimeout(loop, 0);
     i++;
  };
  loop();
}

function doSomething(obj) {
     $("#console").append(obj.name);
}

loopThroughList();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="console"></div>

请注意，这是一个非常慢的循环，因为setTimeout每次迭代实际上会超时4ms +。

另请参阅：jQuery append in loop - DOM does not update until the end

JS函数要到FOR结束时才运行

1 个答案: