总结高级定时器

总结高级定时器
在总结之前需要说明两个问题：

setInterval()是定时器按照规定的间隔，执行很多次。
setTimeout()是延时器按照规定的间隔，只执行一次。

使用定时器是在指定的间隔加入到队列中，而不是在指定的间隔之后立即执行。
重复的定时器
使用setInterval()创建的定时器确保了定时器代码规则的插入队列中。而这个方式的问题在于：

定时器代码可能在代码再次被添加到队列之前代码还没有执行完成。导致了定时器连续执行了多次，中间没有任何停顿。

幸好JavaScript足够聪明，能避免这个问题。
当使用setInterval()时，仅当没有定时器的其他任何实例时，才将定时器代码加入到队列中。这确保了定时器加入到队列中的最小时间间隔是指定间隔。

这种重复的定时器有两个问题：

某些间隔会被跳过。
多个定时器的代码执行间隔可能会比预期小。

为了避免setInterval()的定时器存在的两个缺点，可以用下面模式使用链式调用。

setTimeout(function(){
	setTimeout(arguments.callee,200);
},200)

<!doctype html>
<html>

    <head>
        <title></title>
    </head>

    <body>
        <div id="myDiv" style="position:absolute;width:100px;height:100px;left:0px;top:10px;background:red;"></div>

        <script type="text/javascript">
            setTimeout(function() {
                var div = document.getElementById("myDiv"),
                    left = parseInt(div.style.left)+5;
                    //console.log(left);
                div.style.left = left + "px";
                if (left < 200) {
                    setTimeout(arguments.callee, 50);
                }
            }, 50);
        </script>
    </body>

</html>

猜你喜欢