美文网首页程序员
setTimeout传参bug修复

setTimeout传参bug修复

作者: 我不叫奇奇 | 来源:发表于2017-04-28 10:48 被阅读21次

    相信大家一定会遇见使用定时器产生的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) 
        }
    
    输出正确 执行顺序

    相关文章

      网友评论

        本文标题:setTimeout传参bug修复

        本文链接:https://www.haomeiwen.com/subject/wiyozttx.html