等待 for 循环迭代在视觉上完成，然后再进行下一个答案

【问题标题】：Waiting until for loop iteration to be completed visually before going onto next one等待 for 循环迭代在视觉上完成，然后再进行下一个
【发布时间】：2014-10-25 06:13:35
【问题描述】：

function start_map_one() {

for (var i = 0; i < 15; ++i) {
      $.when(update_map()).then(evolve('W','W1',18,2,sea_limitations,20,350));
}
}

这里，update_map() 更新一个 div。然而，不是 div 按顺序视觉更新 15 次，它似乎要等到所有 15 次迭代都完成，然后显示完成的 div。

所以我理想地寻找这个订单：

update_map() 地图信息用于更新 div - 用户看到视觉结果...然后...

evolve() 地图信息幕后更新

update_map() 地图信息用于更新 div - 用户看到视觉结果...然后...

evolve() 地图信息幕后更新

等等等等 15 次

【问题讨论】：

update_map()返回的值是多少
update_map() 和 evolve() 需要多长时间？如果您没有延迟其中一项功能的东西。可能是您更新div 太快了。
@Eclecticist 更新运行超过 1000 个对象的数组，并根据对象信息将 div 添加到主 div。 Evolve 遍历数组中的每个对象，并可能进行几十次操作/检查。所以我很确定它不会那么快。当我删除循环以便我可以手动单击每次迭代时，每次迭代大约需要 0.3-4 秒。
附带说明，请记住 JavaScript 是单线程的。因此，有时在循环中重排文档时可能会出现奇怪的行为。我建议使用setTimeout 来处理您正在尝试做的事情。

标签： javascript jquery function loops iteration

【解决方案1】：

考虑为此使用递归。在不太了解代码的作用的情况下，它可能看起来像这样......

function start_map_one() {
    start_map_one_helper(15);
}

function start_map_one_helper(count) {
    if (count <= 0) {
        return;
    }
    $.when(update_map()).then(function () {
        evolve('W','W1',18,2,sea_limitations,20,350);
        start_map_one_helper(count - 1);
    });
}

注意then()回调需要封装在一个函数中，否则它会立即执行。

您可能需要将递归调用包装在 setTimeout 中以查看屏幕上的更改...

function start_map_one() {
    start_map_one_helper(15);
}

function start_map_one_helper(count) {
    if (count <= 0) {
        return;
    }
    $.when(update_map()).then(function () {
        evolve('W','W1',18,2,sea_limitations,20,350);
        setTimeout(function() {
            start_map_one_helper(count - 1);
        });
    });
}

【讨论】：

这很完美！太感谢了。在 Evolution() 行上有一个额外的 ')' 我必须删除。
感谢您指出。更正了答案。乐意效劳。 :)

【解决方案2】：

这是因为你没有给浏览器足够的时间来改变显示。只需在每次迭代的执行之间添加一个延迟。试试这个解决方案

function start_map_one() {
    for (var i = 0; i < 15; ++i) {
        setTimeout(function() {
            $.when(update_map()).then(evolve('W','W1',18,2,sea_limitations,20,350));
        }, i * 100);
    }
}

将 100 更改为适合您的时间。

另外，你没有封装进化函数（这意味着你在循环期间调用进化而不是在循环中调用它。只需将它包装在一个函数中。

【讨论】：