JavaScript中setTimeout未按预期工作，求分步延迟执行的实现方法

问题原因 #

1. 异步任务执行机制：JavaScript是单线程模型，setTimeout的回调函数会被放入宏任务队列，只有当前所有同步代码（比如for循环里的console.log）执行完毕后，才会处理队列里的异步任务。所以你会看到所有Before Timeout和After Timeout先一次性输出，5秒后才执行所有定时器回调。
2. var的作用域缺陷：var声明的变量是函数级作用域，整个for循环共享同一个i变量。当定时器回调执行时，循环已经结束，i的值已经变成4（循环结束条件是i<4，最后一次自增后i=4），而arr[4]不存在，因此输出arr[4]=undefined。
3. 并行定时器的问题：原代码中所有定时器都设置为5秒后执行，它们会在同一时间触发，无法实现“逐个等待5秒”的串行效果。

解决方案：实现预期的串行执行效果 #

方法1：async/await + Promise（最直观）

用Promise封装延迟逻辑，配合async/await实现串行等待，同时用let保证每个循环的变量独立：

async function processArray() {
  const arr = [1, 2, 3, 4];
  for (let i = 0; i < arr.length; i++) {
    console.log("Before Timeout" + i);
    // 等待5秒
    await new Promise(resolve => setTimeout(resolve, 5000));
    console.log(`Array val of arr[${i}]=${arr[i]}`);
    console.log("After Timeout" + i);
  }
}

processArray();

方法2：闭包 + 递增延迟时间

用立即执行函数（IIFE）创建闭包捕获当前循环的i，同时让每个定时器的延迟时间依次递增（第一个5秒，第二个10秒...），实现串行效果：

var arr = [1, 2, 3, 4];
for (var i = 0; i < arr.length; i++) {
  (function(currentI) {
    console.log("Before Timeout" + currentI);
    setTimeout(function() {
      console.log(`Array val of arr[${currentI}]=${arr[currentI]}`);
      console.log("After Timeout" + currentI);
    }, 5000 * (currentI + 1));
  })(i);
}

方法3：递归调用

通过递归逐个处理数组元素，每次执行完一个周期后再触发下一个，自然实现串行等待：

const arr = [1, 2, 3, 4];
let index = 0;

function processNext() {
  if (index >= arr.length) return;
  console.log("Before Timeout" + index);
  setTimeout(function() {
    console.log(`Array val of arr[${index}]=${arr[index]}`);
    console.log("After Timeout" + index);
    index++;
    processNext();
  }, 5000);
}

processNext();

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