总结高级定时器
在总结之前需要说明两个问题：
- 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>
扫一扫
2416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
