JS关于for循环中使用setTimeout的四种解决方案

当我们使用JavaScript中的for循环时，有时需要对循环中的操作进行延迟执行，以便在循环过程中给用户一些反馈或避免卡顿。然而，由于JavaScript的异步机制，使用setTimeout方法时，循环内的操作并不会按照我们预期的方式执行。下面介绍一些解决这一问题的方案。

方案一：借助函数递归

可以通过函数递归的方式来模拟for循环的效果。具体来说，我们可以需要定义一个包含循环体内容的函数，再通过递归调用这个函数来实现延迟逐个执行循环体内容的效果，如下所示：

function delayedLoop(start, end, delay) {
  if (start > end) return;
  console.log(start);
  setTimeout(() => {
    delayedLoop(start + 1, end, delay);
  }, delay);
}

delayedLoop(1, 5, 1000);

上述代码实现了输出1到5这5个数字，每隔1秒输出一个数字的效果，其中delayedLoop函数是一个递归函数，它包含了我们需要在循环中执行的内容，并通过setTimeout方法控制了递归调用的时间间隔，从而实现了逐个延迟执行的效果。

方案二：利用Promise实现延迟执行

还可以通过利用Promise对象的特性来实现循环中延迟执行的效果，具体操作如下：

function sleep(time) {
  return new Promise(resolve => setTimeout(resolve, time));
}

async function delayedLoop2(start, end, delay) {
  for (let i = start; i <= end; i++) {
    console.log(i);
    await sleep(delay);
  }
}

delayedLoop2(1, 5, 1000);

上述代码通过定义了一个sleep函数，该函数返回一个Promise对象，并利用setTimeout来模拟延迟执行的效果。在这个基础上，再利用async/await机制，将for循环中需要执行的内容包含在async函数中，并使用await关键字来实现了逐个延迟执行的效果。

除了以上两种方式，还有利用闭包、利用IIFE等方式解决这一问题，具体可以根据实际情况灵活选择。