2回答

• 

  ustbhuangyi

  2016-07-04 22:34:04

  首先，要理解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和内存使用量。

  0 0
• 

  lovecherry

  2016-07-22 15:23:27

  已了解。之前看了老师的解释但是没明白。后来网上查阅下JS单线程和定时器的工作原理后再看老师的解释就清楚许多了。谢谢。

  0 0