如何在循环中使用setInterval？附代码改造可行性问询

当然可以在循环里嵌入setInterval，不过这里有个新手很容易踩的坑——闭包变量捕获的问题，如果处理不当，所有定时器都会共用循环变量的最终值，而不是每一轮循环时的对应值。我给你拆解下正确的实现方式：

假设你的main.js原始代码大概是这样的（变量缩写后的简化版）：

// main.js 示例代码
for (let i = 0; i < 5; i++) {
  // 计划在这里添加setInterval逻辑
}

方案1：ES6+ 推荐写法（利用let的块级作用域） #

这是最简洁省心的方式，ES6的let在每一轮循环都会创建一个独立的变量绑定，每个定时器的回调能精准捕获当前迭代的变量值：

// newMain.js 实现示例
for (let i = 0; i < 5; i++) {
  // 每轮循环创建一个独立的定时器，延迟时间随迭代变化
  setInterval(() => {
    console.log(`第${i+1}个定时器执行中`);
    // 这里替换成你的业务逻辑，比如操作对应索引的DOM或数据
  }, 1000 * i);
}

方案2：兼容ES5的写法（立即执行函数闭包） #

如果需要支持旧环境，用立即执行函数（IIFE）为每轮循环创建独立的作用域，把当前迭代的变量值传进去：

// 兼容ES5的实现
for (var i = 0; i < 5; i++) {
  (function(currentIdx) {
    setInterval(() => {
      console.log(`第${currentIdx+1}个定时器执行中`);
    }, 1000 * currentIdx);
  })(i);
}

方案3：用forEach替代for循环 #

数组的forEach方法本身会为每个迭代创建独立的回调作用域，也能避免变量共享问题：

// 用forEach实现的版本
[0,1,2,3,4].forEach((idx) => {
  setInterval(() => {
    console.log(`第${idx+1}个定时器执行中`);
  }, 1000 * idx);
});

关键注意点 #

• 如果你用var声明循环变量，一定要通过闭包隔离作用域，否则所有定时器都会拿到循环结束后的i值（比如上面的例子里就是5）
• 记得如果需要停止定时器，要把每个setInterval返回的ID存起来，后续用clearInterval清除

内容的提问来源于stack exchange，提问作者purry