例如
for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); }
我们预期打印出来的分别输出数字 1~5, 每秒一次, 每次一个。
但实际上, 这段代码在运行时会以每秒一次的频率输出五次 6。
首先我们来理解一下setTimeout这个方法:
setTimeout是异步执行,每i秒后就往任务队列里边添加一个任务,只有主线程的任务全部执行完了才会执行任务队列的任务,当主线程的任务执行完时,再去执行队列里的任务,此时i已为6,所以每次输出都是6;其实可以这样理解,for每执行一次,都是直接进主线程去先执行的,此时setTimeout也会执行,但它里边的timer()这个时候却是进到Event Table并注册函数,for循环执行完一次,timer()会移至Event Queue去排队等执行,for循环执行了6次,任务队列里会有5个timer()排队等着去执行,等for循环完全执行完了,就回去任务队列里一个个的执行timer()
假如把var i换成let i,结果输出为1,2,3,4,5。这是因为let 声明, 可以用来劫持块作用域, 并且在这个块作用域中声明一个变量。指出变量在循环过程中不止被声明一次, 每次迭代都会声明。 随
后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。
还可以改成IIFE函数来执行,输出的结果也是1,2,3,4,5.因为在迭代内使用IIFE会为每个迭代都生成一个新的作用域,使得延迟函数的回调可以将新的作用域封闭在每个迭代内部,每个迭代中都会含有一个具有正确值的变量供我们访问
for(var i=1;i<=5;i++){ (function(j){ setTimeout(function timer(){ console.log(j); },j*1000) })(i) }