Question

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次

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

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

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

在进入下一个之前，等待直到循环迭代才能在视觉上完成

2 个答案: