JS 函数的执行时机

例1 解释为什么如下代码会打印 6 个 6

let i = 0
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

首先我们要了解下 setTimeout 函数。要知道 setTimeout 是一个异步的函数， 那么这段代码的执行就变成了， 先走完整个循环，这时 i 已经变成了 6，才开始执行 6 个 console.log(i)，所以最终只会打印出 6 个 6。

那有没有什么办法能够解决这个问题， 我就想这样，然后还要打印出 0 1 2 3 4 5。有的，只需要稍稍改变一下就 ok 了。

例2 写出让上面代码打印 0、1、2、3、4、5 的方法

for(let i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

发现没有， 仅仅改变 let 的位置， 当 for 和 let 结合，就能有如此奇效， 这就是 JS 给小白的爱。

那还有没有别的办法， 在 ES6 之前，还真有另外的两种方法，一种是利用 setTimeout 的第三个参数，另外一种是利用闭包。

例3 其他方法实现这个功能

// 第一种方法

for (var i=0; i<6; ++i) {
	setTimeout(function(i){
		console.log(i)
	}, 0, i)
}

// 第二种方法

for(var i=0; i<6; ++i) {
	!(function(j) {
		setTimeout(function(){
			console.log(j)
		}, 0)
	})(i)
}