《JS 函数的执行时机》

335 阅读1分钟

为什么下面代码会打印出6个6

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

先来用例子来解释 setTimeout 函数的作用: 小明正在打游戏, 妈妈喊他吃饭, 小明回答道:
马上就去吃饭,然后接着打完(一会)游戏。这里的马上就去就相当于 setTimeout, 吃饭就相当于 console.log, 但实际上还是先完成当前的事情,即 for 循环。
不过为什么会这样呢?这跟 JS 函数的执行机制有关, 要知道 setTimeout 是一个异步的函数, 那么这段代码的执行就变成了, 先走完整个循环,这时 i 已经变成了 6,才开始执行 6 个 console.log(i),所以最终只会打印出 6 个 6。

打印 0、1、2、3、4、5 的方法

for(let i = 0; i < 6; ++i) {
	setTimeout(() => {
		console.log(i)
	}, 0)
}//0、1、2、3、4、5 

只需改变let的位置, 当 for 和 let 结合,就能有如此奇效, 这就是 JS 给小白的爱。

除了使用 for let 配合,还有什么其他方法可以打印出 0、1、2、3、4、5

  • 第一种是利用 setTimeout 的第三个参数
// 第一种方法
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)
}