【js】for 循环中使用 setTimeout 的问题

问题：
下面代码的输出结果不是间隔3秒依次输出 1， 2， 3， 4， 5。而是隔了3秒连续输出6。这是为什么呢？

for (var i = 1; i <= 5; i++){
    setTimeout(function timer() {
      console.log(i)
    }, 3000);
  }

先说JS的执行机制和作用域
首先，JavaScript是单线程环境，代码从上到下依次执行。这种执行方式被称作为是“同步执行”。

但是，JavaScript引进了异步执行机制，也就是事件循环机制。所以，任务可以分为两种：一种是同步任务；另一种是异步任务。同步任务是指：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。异步任务是指：不进入主线程，而进入任务队列的任务，只有当主线程上的任务执行完毕后，才通知任务队列，任务队列中的任务才会进入主线程执行。

问题中的代码：for循环是同步代码，setTimeout是异步代码。在这种情况下，JavaScript依然按照从上到下执行先执行同步的代码，并将异步的代码放入到任务队列中。setTimeout的第二个参数是把执行代码console.log(i)添加到任务队列所需要的毫秒数，等待的时间是相对主程序执行完毕的时间计算的。也就是说，在主程序执行完后，会等待一会时间，再将setTimeout任务插入到任务队列中。

这样，在执行完同步的代码后，再去执行任务队列中的异步代码。这个时候，任务队列中会有5个console.log(i)等待执行。起初，以为每次循环，setTimeout放入到console.log(i)中的i的值是不一样的，但是，JavaScript引擎在开始执行任务队列中代码时，会在当前作用域中寻找变量i，但是当前作用域（也就是setTimeout中）并没有对 i 的定义。这个时候就会从创建该函数的作用域中寻找变量 i，创建该函数的作用域是全局作用域，所以就找到了for循环中的变量 i ，而这时的全局变量 i 的值已经确定为：6.所以最后打印出来的是5个6

解决方案一：

for (var i = 1; i <= 5; i++){
    setTimeout(function timer(i) {
      console.log(i)
    }(i), 3000);
  }

这样会发现打印出来的值是1， 2， 3， 4， 5；但是没有时间间隔就输出。这时因为在function timer()后面添加()表示的是立即执行函数，只要setTimeout调用就执行了，而不是等到定时器到后才执行

优化：

for (var i = 1; i <= 5; i++) {
    (function (j) {
      setTimeout(function timer() {
        console.log(j)
      }, 3000);     
    })(i)
  }

这样会发现打印出来的值是1， 2， 3， 4， 5；会等待3秒再同时输出；与上面不同，这次的setTimeout要等到定时器到后才能执行。

优化：

如果想要每次输出后间隔一秒，只需要将传入的 i 和 time 相乘即可：

 for (var i = 1; i <= 5; i++) {
    (function (j) {
      setTimeout(function timer() {
        console.log(j)
      }, j * 1000);     
    })(i)
  }

至于为什么是每隔一秒？因为按照上面写法，每隔setTimeout的定时器依次是 1s，2s，3s，4s，5s。之前说过，定时器计时是相对于主线程运行完毕后开始的，所以相邻输出间隔1s.

解决方案二：拆分结构

 function timer(i) {
    setTimeout(() => {
      console.log(i)
    }, i *1000);
  }

  for (var i = 1; i <= 5; i++){
    timer(i)
  }

也是解决了 i 的作用域问题。输出也是每隔一秒输出。

解决方案三：let
let声明的变量只在其声明的块或子块中可用，这一点，与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

for (let i = 1; i <= 5; i++){
    setTimeout(function timer() {
      console.log(i)
    }, i * 1000);
  }

这样打印的效果也是每隔一秒打印一个数值：1， 2， 3， 4， 5.

解决方案四：用new Promise实现一个delay

function delay(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve()
        }, ms);
    })
}
for (let i = 1; i <= 5; i++) {
    await delay(1000)
    console.log(i)
}

这样结构更清晰，delay也可以复用