setTimeout函数意外行为

Question

我有以下代码来附加元素数组中的iframe,批量大小为10,每批时间间隔为10秒.批处理是一个数组,其中包含一个JSON对象,其中包含每个批处理的开始和结束索引.Append函数将带有代码的iframe附加到DOM.

当前行为: JS等待10秒并一起调用追加功能,同时一次追加所有iframe,而不是每批等待10秒.

预期行为: JS在附加每个批处理或每个追加函数调用之前等待10秒.

batches.forEach(function (x) {
    setTimeout(function () {
        append(x, elements);
        console.log('appending'+x);
    }, 10000);
});

知道为什么会发生这种情况吗？

Answer 1

setTimeout 不会暂停执行,因此您的代码相当于

setTimeout(..., 10000)
setTimeout(..., 10000)
setTimeout(..., 10000)
// etc

其中每个超时调用设置为在大约相同的时间执行,即10秒后.

您将不得不在每次迭代中增加超时.像这样......

batches.forEach((x, i) => { // where "i" is the current, zero-based index
  setTimeout(() => {
    // etc
  }, 10000 * (i + 1))
})