setTimeout VS setInterval
setTimeout: 设置一个定时器,在定时器到期后执行一次函数或代码段。
setTimeout() 只执行 code 一次。
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭
// 使用语法
setTimeout(code,millisec)
setInterval(code,millisec[,"lang"])
清除定时器:
// 使用定时器
var timer1 = window.setTimeout(function(){},1000)
var timer2 = window.setInterval(function(){},1000)
// JS中定时器是有返回值的,返回值是一个数字,代表当前是第几个定时器,
// 定时器设置时长最短为4ms,不足4ms按照4ms计算
// 清除定时器
window.clearTimeout(timer1)
window.clearInterval(timer2)
两种清除方法都可以清除通过setTimeout和setInterval设置的定时器并且参数不仅可以是timer,还可以是其返回值,例如:1,2。需要注意的是定时器即使清除,返回值也不会被清除,之后设置的定时器的返回值也会在其返回值的基础上继续向后排,这点类似于银行的排队领号,即使1号的业务办理完了,后面的人仍是从2号开始继续领号,而不是重新从1号开始。
两种方法在设置定时器时有区别,在清除定时器的时候没有区别
使用时的区别:
- setTimeout只有在回调完成之后才会去调用下一次定时器,而setInterval则不管回调函数的执行情况,当到达规定时间就会在事件队列中插入一个执行回调的事件,
- setTimeout执行一次,setInterval周期执行
setImmediate
setImmediate: 在浏览器完全结束当前运行的操作之后立即执行指定的函数(仅IE10和Node 0.10+中有实现),类似setTimeout(func, 0)
// 使用语法
var immediateID = setImmediate(func, [param1, param2, ...]);
var immediateID = setImmediate(func);
// 清除定时器
window.clearImmediate(immediateID)
immediateID 是这次setImmediate方法设置的唯一ID,可以作为 window.clearImmediate 的参数.
func 是将要执行的回调函数
setTimeout(func, 0) 和 setImmediate(func)谁更快? setTimeout
requestAnimationFrame
// 使用语法
window.requestAnimationFrame(callback);
// 取消回调
window.cancelAnimationFrame()
requestAnimationFrame VS setTimeout
这两个一般在制作动画中会比较,利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。
这种现象的产生有两个原因:
- setTimeout的执行时间并不是确定的。在Javascript中, setTimeout 任务被放进了异步队列中,只有当主线程上的任务执行完以后,才会去检查该队列里的任务是否需要开始执行,因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。
- 刷新频率受屏幕分辨率和屏幕尺寸的影响,因此不同设备的屏幕刷新频率可能会不同,而 setTimeout只能设置一个固定的时间间隔,这个时间不一定和屏幕的刷新时间相同。
与setTimeout相比,requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲,如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次,如果刷新率是75Hz,那么这个时间间隔就变成了1000/75=13.3ms,换句话说就是,requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次,这样就不会引起丢帧现象,也不会导致动画出现卡顿的问题。
除此之外,requestAnimationFrame还有以下两个优势:
- CPU节能:使用setTimeout实现的动画,当页面被隐藏或最小化时,setTimeout 仍然在后台执行动画任务,由于此时页面处于不可见或不可用状态,刷新动画是没有意义的,完全是浪费CPU资源。而requestAnimationFrame则完全不同,当页面处理未激活的状态下,该页面的屏幕刷新任务也会被系统暂停,因此跟着系统步伐走的requestAnimationFrame也会停止渲染,当页面被激活时,动画就从上次停留的地方继续执行,有效节省了CPU开销。
- 函数节流:在高频率事件(resize,scroll等)中,为了防止在一个刷新间隔内发生多次函数执行,使用requestAnimationFrame可保证每个刷新间隔内,函数只被执行一次,这样既能保证流畅性,也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的,因为显示器每16.7ms刷新一次,多次绘制并不会在屏幕上体现出来。
参看文档:http://caibaojian.com/javascript-timer.html
https://blog.csdn.net/vhwfr2u02q/article/details/79492303