首先了解setTimeout延时器的运行机制
setTimeout(fun,time); 定时器会先将fun函数放到队列中,等待区域内其他主程序执行完毕后按时间先后顺序执行fun函数
因此若是这样使用将不会得到想要的结果在控制台上输出1.2.3.4.5
for (var i=1; i<=5; i++) {
setTimeout( function timer() {
console.log( i );
}, i*1000 );
}
实际结果是1-6秒都是输出6,这是为什么呢?这时就要去了解setTimeout函数的运行机制了,它会等到for循环全部运行完毕后,才会执行fun函数,当for循环结束后此时i的值已经变成了6因此虽然定时器跑了5秒,控制台上的内容依然是6(当定时器跑完一秒之后for循环已经做完了)
那我们继续来看另外一种情况
for (var i=1; i<=5; i++) {
(function() {
setTimeout( function timer() {
console.log( i );
}, i*1000 );
})();
}
由setTimeout的运行机制可以知道,首先会运行外部的所有主程序,但是fun并没有发现一个实参所以跟第一个例子并无实际差别。
继续看跟另外一个例子
for (var i=1; i<=5; i++) {
(function(j) {
setTimeout( function timer() {
console.log( j );
}, j*1000 );
})(i);
}
我们可以发现跟预期结果一致,原因就是因为实际参数跟定时器内部的I有强依赖
还有一种就是分别将setTimeout的定义和调用放到不同部分
function timer(i) {
setTimeout( console.log( i ),i*1000 );
}
for (var i=1; i<=5;i++) {
timer(i);
}
控制台上输出如下