等到循环迭代以可视方式完成，然后再进行下一个循环迭代

Waiting until for loop iteration to be completed visually before going onto next one

本文关键字：循环 迭代 然后 下一个 方式完 可视      更新时间：2023-09-26
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 - 用户 看到视觉结果...然后。。。

进化(( 地图信息 幕后更新

update_map(( 映射信息用于更新div - 用户 看到视觉结果...然后。。。

进化(( 地图信息 幕后更新

等等 15 次

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

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);
        });
    });
}

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

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 更改为适合您的时间。

此外，您没有封装 evolve 函数(这意味着您在循环期间调用 evolve 而不是通过它调用它。只需将其包装在一个函数中即可。

相关文章：