您现在的位置是：首页 > 文章详情

阅读《深入理解JavaScript定时机制》

日期：2018-01-06点击：514收藏

鸟哥的这篇《深入理解JavaScript定时机制》从javascript线程角度分析了setTimeout和setInterval两个定时触发器的实现原理。

看完的体验就是主要要记住两点：

javascript的引擎是单线程的

javascript的引擎是基于事件驱动的

setTimeout和setInterval都是往事件队列中增加一个待处理事件而已。setTimeout是触发一次，而setInterval是循环触发。

但是

想要使用setTimeout循环触发

可以这样做：

 
        setTimeout(
        function
        () { 
       
        /* 代码块... */ 
       
        setTimeout(arguments.callee, 10); 
       
        }, 10);

这个看起来和

 
        setInterval(
        function
        (){ 
       
        /*代码块... */ 
       
        }, 10);

但是上一份代码中，是执行完了代码块，才挂起来这个事件，所以两次执行时间会大于10，而第二份代码，是自动在10的时候挂上这个事件，所以两次事件相隔的时间会小于等于10（这个说法还是有点憋屈。。。）

但是要明确：

当线程阻塞在一个事件的时候，不管是使用setInterval还是setTimeout都需要等待当前事件处理完才能执行。

比如下面例子：

 
        <script>
       
        function 
        sleep(d){ 
       
        document.write(
        Date
        .now() + 
        "<br>"
        ); 
       
        for
        (
        var 
        t = 
        Date
        .now();
        Date
        .now() - t <= d;) { 
       
        } 
       
        }
       
        setInterval(
        function
        () { 
       
        sleep(9123) 
       
        }, 1000);
       
        </script>