首页 > 其他 > 详细

setTimeout这个大坑,我填好了,啊哈哈!

时间:2016-04-09 23:22:25      阅读:255      评论:0      收藏:0      [点我收藏+]

        在一次工作中碰到setTimeout的一个大坑,在用setTimeout进行延时执行一个函数的时候,由于该函数需要传参,所以把它写成了 setTimeout(fn(data),1000) ,详细如下代码:

         function hello(id){
                    alert(id);
                }
                setTimeout(hello("username"),3000)

 

 结果函数立即执行了,根本没有延时,很费解,查了下资料,知道setTimeout的正确写法是setTimeout(fn,3000)或者setTimeout(function(){ //... },3000),隐隐知道我这样写有哪点不对,可是说不明白我这样写具体问题在哪里,今天看其他资料的时候突然想到这个问题,就下决心要好好看看这个问题。

       首先,发现setTimeout与JS的运行机制有一定关系,JS是单线程的,在有多个函数或者其他需要运行的时候,会按顺序一个接着一个执行,也就是说如果在setTimeout(fn,delay)之后或者之前有其他要执行的函数或者其他什么的时候,会按顺序执行所有。其次,setTimeout本身(相当于原型上,不知道这样说对不对)是没有fn(data)后面所带的(data)(执行切带参数)的。从以上阐述一分析,JS的运行机制是按顺序,当然对于setTimeout来说更特殊却也很简单,对于setTimeout,浏览器会先执行其他,再执行setTimeout。也许你会说是因为有delay,那么看下面这段代码:

        var a = 1
        function test () {
            setTimeout(function () {
                a=5
         alert(a)
       },0)
       alert(a)
    }
    test ()
    alert(
0)

此时,会依次弹出1,0,5。此时延时为0,setTimeout仍然是最后执行的。说明浏览器对setTimeout的解析就如我所说一样,先执行其他立即执行的程序,此外也要注意这个里面写出来的所谓的delay时间可能大于等于实际延迟时间。因此对于setTimeout(fn(data),3000) ,会立即执行fn这个函数而没有任何延迟。针对阐述二,我暂时没办法查到setTimeout的运行机制或者说“原型”上的问题,因此只能讲一个根据这个“原型”理论作出的针对这个问题的解决方案,即改写setTimeout“原型”,具体见如下代码:

      function hello(id){
      alert(id);  
    }
    var _sto = setTimeout; 
    window.setTimeout = function(callback,timeout,param){ 
      var args = Array.prototype.slice.call(arguments,2); 
      var _cb = function(){ 
        callback.apply(null,args); 
      } 
      _sto(_cb,timeout); 
    }
    window.setTimeout(hello,3000,"userName");

 

 

    另外一个解决方案:

                function hello(id){
                    alert(id);
                }
                setTimeout(‘hello("username")‘,3000)

     感觉自己对setTimeout的运行机制内部即我所谓的“原型”方面了解还不是很好,希望看到此篇博客的同学可以在文章下方留言交流,希望和大家一起进步!

      

     

setTimeout这个大坑,我填好了,啊哈哈!

原文:http://www.cnblogs.com/july-Vivian/p/5372726.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!