相信大家一定会遇见使用定时器产生的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) 
    }

输出正确

执行顺序