JS 函数的执行时机(for,let和setTimeout()的结合使用)

JS 函数的执行时机(for,let和setTimeout()的结合使用)

执行如下代码段A:

let i = 0
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}
//依次打印输出 6个6

for循环代码,满足循环条件下执行6次,没有问题,而在setTimeout()函数里面,为什么打印输出了6,而不是0,1,2,3,4,5呢?

可以先看关于setTimeout()你所不知道的地方,详解setTimeout(),了解setTimeout()函数;

在代码段A中,是先执行完for循环,然后再setTimeout()里面的代码,当for循环执行完后,i最后的值为6,所以就打印输出 6个6

再执行如下代码段B:

for(let i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}
//依次打印输出 0 1 2 3 4 5

for循环代码,满足循环条件下执行6次,没有问题,在setTimeout()函数里面,依次打印输出了0,1,2,3,4,5,和代码段A输出的结果完全不一样,这是问什么呢?

可以先看 ES6简介 let 和 const 命令 let部分,了解let和for循环;

在代码段B中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。所以就算是for和setTimeout()执行的顺序不变,但是打印输出的还是本次循环i的值.

在 ES6 之前，还有另外的两种方法，一种是利用 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)
}