Question

我想创建一个随机选择器＆＃39;函数迭代数组一段时间（例如：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的函数使用selected_place的最后一个值运行100次。

有关setTimeout in for-loop does not print consecutive values

中此行为的详情

我注意到的另一个问题是你的setTimeout将在400ms后触发，因为for循环将在大约1 ms内完成，传递给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>

Answer 2

您可以对值使用闭包，并为每次超时使用不同的时间。

＆＃13;

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

＆＃13;

<div id="place_label"></div>

＆＃13;

对于第一次运行，您可以显示每个元素，然后获取最后一个值的随机元素。

＆＃13;

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

＆＃13;

<div id="place_label"></div>

＆＃13;

Answer 3

你应该改变你的循环，因为你现在循环100次，可能是一毫秒，并且在同一时间再次订购100更改文本。所以更好的是等待超时400 ms，然后进行下一次迭代。请记住超时是异步的。

Answer 4

我认为如果将整个函数置于超时状态可能会更好。（我不确定并且没有测试，但这就是我想要尝试的。）

我的意思是你只需要构建一个创建随机函数并填充你的字段的函数。之后你再次调用同一个函数超时+保留一个你作为参数传递的计数器。

下面我的意思的一个例子:(没有测试）

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

execute_randomizer(0); /* Start for the first time */

function execute_randomizer(times) {
    if(times == 100)
        return; /* stop execution */

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

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

4 个答案: