1.背景介绍
在js语言中,有两种定时器。setTimeout()和setInterval()。有了定时器,我们可以实现很多效果。
2.知识剖析
一次性定时器(setTimeout()):仅在指定的时间后触发一次
定期定时器(setInterval()):定期触发
语法:
setTimeout(要执行的函数,时间),时间的单位是毫秒。
setInterval(要执行的函数,时间),时间的单位是毫秒。
3.常见问题
在按钮中使用定时器时,多次点击按钮,定时器的执行时间会变短。
4.解决方案
使用clearInterval()或 clearTimeout() 清除定时器
5.编码实战
使用定时器制作图片切换(轮播图)
<style>
.banner img {
width: 100%;
height: 400px;
}
</style>
<div class="banner">
<img id="img" src="../img/A/1.jpg"/>
</div>
<script>
var img = document.getElementById("img");var i = 1;
function banner() {
i ++;
if(i>4) {
i = 1;
}
img.src = "../img/A/"+i+".jpg"
}
setInterval(banner,1000);
</script>
6.扩展思考
如何停止时间函数的执行?
使用clearInterval()或clearTimeout()
7.参考文献
JavaScript定时器与执行机制解析
深入理解JavaScript定时机制和定时器注意问题
菜鸟教程
8.更多讨论
问题一
setTimeout(),setImmediate(),process.nextTick(),它们有什么优点和缺点?
答:
setTimeout(),精确度不高,可能有延迟执行的情况发生,且因为动用了红黑树,所以消耗资源大;
setImmediate(),消耗的资源小,也不会造成阻塞,但效率也是最低的。
process.nextTick(),效率最高,消费资源小,但会阻塞CPU的后续调用;
问题二
Promise是什么?
答
Promise是很常用的一种异步模型,如果我们想让代码在下一个事件循环执行,可以选择使用setTimeout(0)、setImmediate、requestAnimationFrame(Chrome)和Promise。 而且Promise的延迟比setImmediate更低,意味着Promise比setImmediate先执行。
问题三
如何使用定时器制作匀速动画的效果?
答:
对匀速动画的封装:也就是对定时器的使用,来做动画特效。
(1)单向的运动function animate(obj, target){//obj:选中的属性, target:目标坐标
obj.timer = setInterval(function(){
if(obj.offsetLeft > target){
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft +10 +"px";
},30);
}
(2)双向运动,通过比较目标坐标与开始坐标的位置比较决定运动的方向
function animate(obj, target){
var speech = target > obj.offsetLeft ? 5:-5;//判断动画移动的方向
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;//判断相差的距离
obj.style.left = obj.offsetLeft +speech +"px";
if(Math.abs(result) <= 5) {//相差的距离小于5时,关闭定时器
clearInterval(obj.timer);
obj.style.left = target+"px";
}
},30);
}