相同点
requestAnimationFrame 返回值是一个 long 整数,请求 ID ,是回调列表中唯一的标识。传入这个值到window.cancelAnimationFrame()
中可以取消回调函数。
setTimeout 和 setInterval 返回值都是一个整数值,表示定时器编号。将该整数传入 clearTimeout()
和clearInterval()
函数,就可以取消对应的定时器。
不同点
requestAnimationFrame
requestAnimationFrame(callback) 要求浏览器在下次重绘之前调用指定的回调函数更新动画。
也就是说它是跟着浏览器绘制走的,如果浏览设备绘制间隔是 16.7ms,那就这个间隔绘制;如果浏览设备绘制间隔是 10ms, 就 10ms 绘制。这样就不会存在过度绘制的问题,动画不会掉帧。
不过这个函数只能调用一次,如果想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用requestAnimationFrame()
。
setTimeout
用来指定某个函数或某段代码,在多少毫秒之后执行。
只能执行一次。
let timeoutId = setTimeout(func|code, delay);
setInterval
指定某个函数每隔多少毫秒执行一次,如果不取消就无限次执行。
let timerId = setInterval(func|code, delay);