Javascript:setTimeout、for 循环和回调函数

Question

我正在解决 here 中的这个代码难题

这是我到目前为止所拥有的:

for (var i = 0; i < 1000; i += 100) {
    waitFor(i, function then() {
    console.log(i)
    })
}

// this will run a callback function after waiting milliseconds
function waitFor(milliseconds, callback) {
    setTimeout(callback.apply(), milliseconds)
}

这会记录 0 到 900，但它会一次性完成所有操作，然后在最后等待 900 毫秒(而不是在每个 console.log 之间等待 i 毫秒)。

谁能帮我理解这个？

Answer 1

您的代码中存在两个不同的问题:

1. 闭包导致始终打印值 1000，而不是 100、200 ... 等。
2. 您使用的超时时间太短，因此函数会连续快速执行。

第一个问题很难用一个答案来解释，但我会尝试给你一些见解，因为将变量值打印到控制台的函数是在 for 循环内定义的，该函数将始终保持循环结束时的 i 值，在您的情况下为 1000。

要解决这个问题，您需要类似于 @thg435 在他的评论中提到的内容，如下所示:

// this will run a callback function after waiting milliseconds
function waitFor(milliseconds, callback) {
    setTimeout(callback, milliseconds);
}

function createFunction(i) {
    return function() { console.log(i); };
}

for (var i = 0; i < 1000; i += 100) {
    waitFor(i, createFunction(i));
}

第二个问题是超时值实际上是 i 在循环时采用的值，即 100、200 ...等等，这些都是小于一秒的非常小的值，因此当 for 循环结束时，这些函数都将准备好执行，因此它们将立即一个接一个地执行。

要解决此问题，您需要使用更大的时间间隙，例如将 i 乘以 10，如下所示:

waitFor(i*10, createFunction(i));
        ^^^^