时间戳

首页 > 解决方案 > JS 函数在 FOR 内部时直到最后才运行

javascript - JS 函数在 FOR 内部时直到最后才运行

问题描述

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

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

如何让 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
}

标签： javascriptsorting

解决方案

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

您可以使用setTimeoutDOM 渲染，并执行以下操作：

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 直到最后才会更新

推荐阅读