相信大家一定会遇见使用定时器产生的bug,例如下面这样:
for(var i=0;i<5;i++){
setTimeout(function(){
console.log(i)
},0)
}
输出
为什么不是01234?
这是因为setTimeout在浏览器中执行的时候,是将定时器拿出来放在一边,等到系统的js执行完毕之后才开始执行.
setTimeout(函数,间隔时间),这个时间间隔是理想状态下的时间间隔,如果系统的js执行时间大于这个时间间隔,那会在系统js执行完毕后立刻执行定时器,如果系统js执行时间小于这个时间间隔,那定制器会一直等到时间间隔才执行.
所以上述的代码执行的时候是创建了5个定时器放在一边,等到for循环执行完毕,i已经变成5了之后再执行定时器,当然是输出5个5了
执行顺序
解决办法
将定时器用闭包封装起来
for(var i=0;i<5;i++){
(function(i){
setTimeout(function(){
console.log(i)
},0)
})(i)
}
输出正确
执行顺序
网友评论