Javascript 在显示元素时循环遍历数组

Question

我想创建一个“随机选择器”行为，其中函数在一段时间内迭代数组(例如:3 秒、5 秒)，同时在整个迭代过程中快速显示所有数组元素，直到迭代结束。想象一下，看到标签中一个接一个地显示所有元素，直到最终停在一个元素处。

到目前为止我的代码:

var places = ["Curry Leaf", "Subway", "Burger King"];

function execute_randomizer() {
    var place_label = document.getElementById("place_label");
    for (var i = 0; i < 100; i++) {
        var selected_place = places[Math.floor(Math.random() * places.length)];
        setTimeout(function () {
            place_label.innerText = selected_place;
        }, 400);
    }
}

这将贯穿迭代并在循环完成时显示一个元素，但它不会显示每个迭代的元素。我该如何修改这个？

编辑

即使有 3 个元素，动画也必须重新遍历数组，直到持续时间完成

Answer 1

您的 for 在 setTimeout 运行之前完成迭代，然后传递给 setTimeout 的函数使用 的最后一个值运行 100 次选定的地点。

有关此行为的更多信息，请参阅 setTimeout in for-loop does not print consecutive values

<小时/>

我注意到的另一个问题是你的 setTimeout 将在 400 毫秒后触发，因为 for 循环将在大约 1 毫秒内完成，传递给 setTimeout 的函数将触发 100一次又一次，中间没有延迟，为此，我将 setTimeout 的延迟参数从 400 替换为 400 * i。

<小时/>

var places = ["Curry Leaf", "Subway", "Burger King"];     
function execute_randomizer() {
    var place_label = document.getElementById("place_label");
    for (var i = 0; i < 100; i++) {
        var selected_place = places[Math.floor(Math.random() * places.length)];
        (function(selected_place){
          setTimeout(function () {
              place_label.innerText = selected_place;
          }, 400 * i);
        })(selected_place);
    }
}
execute_randomizer();

<span id="place_label"></span>