从forEach内部的setTimout获取值

基础概念

forEach 是 JavaScript 中数组的一个方法，用于遍历数组的每个元素并对其执行一个函数。setTimeout 是 JavaScript 中的一个全局函数，用于在指定的延迟时间后执行一段代码。

相关优势

• forEach 的优势在于其简洁性和内建性，使得遍历数组变得非常方便。
• setTimeout 的优势在于它可以异步地延迟执行代码，这在处理需要等待的操作时非常有用。

类型

• forEach 是一个数组方法。
• setTimeout 是一个全局函数。

应用场景

• forEach 通常用于遍历数组并对每个元素执行相同的操作。
• setTimeout 通常用于实现定时任务或延迟执行某些操作。

遇到的问题及解决方法

在 forEach 内部使用 setTimeout 时，可能会遇到闭包问题，导致无法正确获取当前迭代的值。这是因为 setTimeout 的回调函数在执行时，forEach 已经完成了遍历，此时变量指向的是最后一次迭代的值。

示例代码

const arr = [1, 2, 3, 4, 5];

arr.forEach((item, index) => {
  setTimeout(() => {
    console.log(item); // 可能会输出 5 五次
  }, 1000);
});

解决方法

使用闭包来捕获每次迭代的值。

const arr = [1, 2, 3, 4, 5];

arr.forEach((item, index) => {
  (function(item) {
    setTimeout(() => {
      console.log(item); // 正确输出 1, 2, 3, 4, 5
    }, 1000);
  })(item);
});

或者使用 for...of 循环结合 let 关键字。

const arr = [1, 2, 3, 4, 5];

for (let item of arr) {
  setTimeout(() => {
    console.log(item); // 正确输出 1, 2, 3, 4, 5
  }, 1000);
}

参考链接

• MDN Web Docs: forEach
• MDN Web Docs: setTimeout

通过这些方法，你可以确保在 setTimeout 回调函数中正确获取到 forEach 内部的值。