for循环无法正常迭代问题咨询：函数嵌入循环后跨浏览器异常及异步迭代替代方案

咱们来拆解你遇到的两个核心问题：

1. Safari的引用错误（无法找到变量i） #

你在for循环的块内部使用function timer()声明函数，这种块级函数声明的行为在不同浏览器的JavaScript引擎中存在兼容差异。旧版Safari没有完全遵循ES6的块级作用域规范，导致timer函数无法正确捕获当前循环迭代的i变量，当setTimeout的异步回调执行时，就会抛出找不到i的错误。

2. Chrome/Firefox仅“看似”执行第一次迭代 #

实际上你的代码是同时启动了4个独立的timer递归任务（每个循环迭代都调用了timer()），它们会并行修改scores数组。因为i=0对应的循环需要执行40次setTimeout，输出日志远多于其他迭代，所以控制台被大量i=0的日志淹没，让你误以为只执行了第一次迭代。而这也和你想要“等待当前迭代的函数执行完成再进行下一次”的需求完全不符。

要实现“前一个迭代的异步任务完全执行完再启动下一个”的逻辑，最清晰的方式是用async/await结合Promise来包装异步操作。下面是具体的实现代码：

let realScores = [40, 7, 3, 2];
let scores = [0, 0, 0, 0];

// 把单个索引对应的计数逻辑包装成Promise
function runTimerForIndex(i) {
  return new Promise((resolve) => {
    function timer() {
      setTimeout(() => {
        scores[i]++;
        console.log(i, scores[i]);
        if (scores[i] < realScores[i]) {
          timer(); // 未达到目标，继续递归
        } else {
          resolve(); // 达到目标，标记这个任务完成
        }
      }, 10);
    }
    timer();
  });
}

// 用async函数串行执行每个任务
async function startSerialExecution() {
  for (let i = 0; i < scores.length; i++) {
    await runTimerForIndex(i); // 等待当前索引的任务完成，再进入下一次迭代
    console.log(`完成第${i}个任务，当前scores:`, scores);
  }
}

startSerialExecution();

代码说明： #

• runTimerForIndex(i)：将单个索引对应的计数逻辑包装成Promise，当该索引的scores[i]达到realScores[i]时，调用resolve()标记任务完成，让后续的await知道可以继续执行下一个迭代。
• startSerialExecution()：用async函数包裹逻辑，在for循环中通过await强制等待每个任务完成，彻底实现串行执行的效果。
• 改用函数表达式的方式定义timer，避免了块级函数声明带来的浏览器兼容问题。

这样修改后，不仅解决了Safari的引用错误，还完美实现了你“等待前一个任务完成再进行下一次迭代”的核心需求。

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