为什么不用setInterval
首先,要理解JS的执行是单线程的,在一轮Event Loop的时候,会执行所有同步JS代码。
setInterval的运行机制是,将指定的代码移出本次执行,等到下一轮Event Loop时,再检查是否到了指定时间。如果到了,就执行对应的代码;如果不到,就等到再下一轮Event Loop时重新判断。这意味着,setTimeout指定的代码,必须等到本次执行的所有代码都执行完,才会执行。
每一轮Event Loop时,都会将“任务队列”中需要执行的任务,一次执行完。setTimeout和setInterval都是把任务添加到“任务队列”的尾部。因此,它们实际上要等到当前脚本的所有同步任务执行完,然后再等到本次Event Loop的“任务队列”的所有任务执行完,才会开始执行。由于前面的任务到底需要多少时间执行完,是不确定的,所以没有办法保证,setTimeout和setInterval指定的任务,一定会按照预定时间执行。
所以,我们如果用setInterval去实现动画,当一次执行的JS时间超过了setInterval设置的延时时间,会导致动画看上去卡顿。jQuery实现动画就是用了定时器,所以性能很一般。所以一般建议是用requestAnimationFrame或者css3动画。
requestAnimationFrame比起setTimeout、setInterval的优势主要有两点:
requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。
在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。
已了解。之前看了老师的解释但是没明白。后来网上查阅下JS单线程和定时器的工作原理后再看老师的解释就清楚许多了。谢谢。