Question

假设我的javascript中有两个数组：

var content = ["string1", "string2", "string3", "string4"],
    milliseconds = [500, 1500, 1000, 500];

我希望content数组的每个元素一一显示在milliseconds数组中，并且在500毫秒后显示string1 string2。 1500之后（显示string1）等等。

我是一个初学者，我尝过这样的东西：

for (var i = 0; i < content.length - 1; i++) {
    setTimeout(function() {
        console.log(content[i]);
    }, milliseconds[i]);
};

但它只显示最后一个字符串四次，看起来setTimeout方法都是同时开始，而不是一个接一个。有没有办法得到我想要的效果？

Answer 1

不确定每次都记录第四个字符串，不幸的是我的手机不允许我运行它，但我可以确切地看到为什么所有4个超时同时开始。这是因为它们都是同时创建的。如果你想让它们一个接一个地开始，你必须让每个人开始下一个超时。

Answer 2

首先，setTimeout似乎都是在同一时间开始的，因为你正在同时调用它们。 JavaScript没有阻止 - 它不会等待setTimeout回调实际触发，它只是继续。这就是为什么，因为你使用的是循环，所有的回调都会一次或多或少地被调度。

第二个问题，即所有console.log似乎打印相同的东西，是因为相同的循环问题。由于循环在任何回调完成之前完成，因此i的值被设置为循环的最后一个索引。然后，当回调发生时，猜猜i等于什么？

一种技术是保持当前项目的运行索引。

// Don't pollute the global namespace
(function() {
    // Keep the index around
    var i = 0;

    // Setup the callback
    var callback = function() {
        console.log(content[i]);

        // Stop whenever there's nothing left to log
        if (i < content.length) {
            // Chain the next timeout, using the next string,
            // with the next wait period, using the callback
            i += 1;
            setTimeout(callback, milliseconds[i]);
        }
    };

    // Start the first setTimeout
    setTimeout(callback, milliseconds[i]);
})();

以不同的间隔一个接一个地显示内容

2 个答案: