1

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

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

我希望content数组的每个元素一个一个地显示在控制台中，并以milliseconds数组的间隔string1在 500 毫秒后显示，string2在 1500 毫秒后（从 的显示开始string1）等等。

我是一个初学者，我尝试过类似的东西：

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

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

4

2 回答 2

0

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

于 2012-06-29T20:47:43.707 回答
0

首先，setTimeouts 似乎都是同时开始的，因为您同时调用它们。JavaScript 不会阻塞——它不会等待setTimeout回调真正触发，它只会继续运行。这就是为什么，由于您使用的是循环，所有的回调或多或少地一次被安排。

第二个问题，所有的console.logs 似乎都打印相同的东西，是因为相同的循环问题。由于循环在任何回调完成之前完成，因此值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]);
})();
于 2012-06-29T20:53:42.063 回答