JS动画三剑客——setTimeout、setInterval、requestAnimationFrame

详细介绍了setTimeout、setInterval、requestAnimationFrame的使用及其优缺点，列举了常见面试题

一、前言

　　前端实现动画效果主要有以下几种方法：CSS3中的transition 和 animation ，Javascript 中可以通过定时器 setTimeout、setinterval，HTML5 canvas，HTML5提供的requestAnimationFrame。本文主要分析setTimeout、setinterval、requestAnimationFrame三者的区别和他们各自的优缺点。在了解他们三个之前，我们先来看看一些相关概念。

二、相关概念介绍

　　1.屏幕刷新频率

　　　　即图像在屏幕上更新的速度，也即屏幕上的图像每秒钟出现的次数，它的单位是赫兹(Hz)。 对于一般笔记本电脑，这个频率大概是60Hz。这个值的设定受屏幕分辨率、屏幕尺寸和显卡的影响。

　　2.动画原理

　　　　动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果，这个变化要以连贯的、平滑的方式进行过渡。在屏幕每次刷新前，将图像的位置向左移动一个像素，即1px。屏幕每次刷出来的图像位置都比前一个要差1px，你就会看到图像在移动；由于我们人眼的视觉停留效应，当前位置的图像停留在大脑的印象还没消失，紧接着图像又被移到了下一个位置，因此你才会看到图像在流畅的移动，这就是视觉效果上形成的动画。

三、setInterval

　　1.运行机制

　　　　按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数（当页面被隐藏或者最小化时，setInterval()仍在后台继续执行，这种动画刷新是完全没有意义的，对cpu也是极大的浪费），直到 clearInterval() 被调用或窗口被关闭。

　　　　setinterval的执行时间不确定，参数中的时间间隔是将代码添加到异步队列中等待的时间。只有当主线程中的任务以及队列前面的任务是执行完毕，才真正开始执行动画代码。

　　　　注：HTML5标准规定，setInterval的最短间隔时间是10毫秒，也就是说，小于10毫秒的时间间隔会被调整到10毫秒。

　　2.语法

　　　　setinterval(code, milliseconds);

　　　　setinterval(function, milliseconds, param1, param2, ...)

参数	描述
code/function	必需。要调用一个代码串，也可以是一个函数。
milliseconds	必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。
param1, param2, ...	可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

　　3.实例

?

1 2 3 4 5 6 7 8 9 10

//每三秒（3000 毫秒）弹出 "Hello": var myVar;    function myFunction() {     myVar = setInterval(alertFunc, 3000); }    function alertFunc() {     alert("Hello!"); }

　　4.清除setInterval

　　　　clearinterval() 方法可取消由 setinterval() 函数设定的定时执行操作。参数必须是由 setinterval() 返回的 id 值。 注意: 要使用 clearinterval() 方法, 在创建执行定时操作时要使用全局变量.清除示例如下：

?

1 2 3 4 5 6 7 8 9 10

var myVar = setInterval(function(){ setColor() }, 300);    function setColor() {     var x = document.body;     x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow"; }    function stopColor() {     clearInterval(myVar); }

　　5.缺点

　　　（1）setinterval()无视代码错误，如果setinterval执行的代码由于某种原因出了错，它还会持续不断地调用该代码。

　　　（2）setinterval无视网络延迟，由于某些原因（服务器过载、临时断网、流量剧增、用户带宽受限，等等），你的请求要花的时间远比你想象的要长。但setinterval不在乎。它仍然会按定时持续不断地触发请求，最终你的客户端网络队列会塞满调用函数。

　　　（3） setinterval不保证执行，与settimeout不同，并不能保证到了时间间隔，代码就准能执行。如果你调用的函数需要花很长时间才能完成，那某些调用会被直接忽略　

四、setTimeout

　　1.运行机制

　　　　在指定的毫秒数后调用函数或计算表达式。每次函数执行的时候都会创建换一个新的定时器。在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何确实的间隔。并且确保在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续的运行。当方法执行完成定时器就立即停止(但是定时器还在,只不过没用了);

　　2.语法（同setInterval）

　　3.实例

?

1 2 3 4 5 6 7 8 9 10

//3 秒（3000 毫秒）后弹出 "Hello" : var myVar;    function myFunction() {     myVar = setTimeout(alertFunc, 3000); }    function alertFunc() {     alert("Hello!"); }

　　4.清除setTimeout

　　　　使用cleartimeout函数，用法同clearinterval

　　5.缺点

　　　　（1）利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。

　　　　（2）settimeout的执行时间并不是确定的。在javascript中， settimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此 settimeout 的实际执行时间一般要比其设定的时间晚一些。

　　　　 （3）刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 settimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。

　　　　 （4）settimeout的执行只是在内存中对图像属性进行改变，这个变化必须要等到屏幕下次刷新时才会被更新到屏幕上。如果两者的步调不一致，就可能会导致中间某一帧的操作被跨越过去，而直接更新下一帧的图像。

五、requestAnimationFrame（推荐使用）

　　1.运行机制

　　　　告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。不需要设置时间间隔，是由系统的时间间隔定义的。大多数浏览器的刷新频率是60Hz(每秒钟反复绘制60次)，循环间隔是1000/60，约等于16.7ms。不需要调用者指定帧速率，浏览器会自行决定最佳的帧效率。只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

　　2.语法

　　　　window.requestanimationframe(callback);

　　　　参数callback：下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。

　　3.实例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var start = null; var element = document.getElementById('SomeElementYouWantToAnimate'); element.style.position = 'absolute';   function step(timestamp) {   if (!start) start = timestamp;   var progress = timestamp - start;   element.style.left = Math.min(progress / 10, 200) + 'px';   if (progress < 2000) {     window.requestAnimationFrame(step);   } }   window.requestAnimationFrame(step);

　　4.缺点

　　　requestanimationframe 不管理回调函数，即在回调被执行前，多次调用带有同一回调函数的 requestanimationframe，会导致回调在同一帧中执行多次。我们可以通过一个简单的例子模拟在同一帧内多次调用 requestanimationframe 的场景：（mousemove, scroll 这类事件常见）

?

1 2 3 4 5 6

const animation = timestamp => console.log('animation called at', timestamp)    window.requestAnimationFrame(animation) window.requestAnimationFrame(animation) // animation called at 320.7559999991645 // animation called at 320.7559999991645

　　　我们用连续调用两次 requestanimationframe 模拟在同一帧中调用两次 requestanimationframe。 例子中的 timestamp 是由 requestanimationframe 传给回调函数的，表示回调队列被触发的时间。由输出可知，animation 函数在同一帧内被执行了两次，即绘制了两次动画。

　　ps：解决办法

　　　　对于这种高频发事件，一般的解决方法是使用节流函数。但是在这里使用节流函数并不能完美解决问题。因为节流函数是通过时间管理队列的，而 requestanimationframe 的触发时间是不固定的，在高刷新频率的显示屏上时间会小于 16.67ms，页面如果被推入后台，时间可能大于 16.67ms。

　　　　完美的解决方案是通过 requestanimationframe 来管理队列，其思路就是保证 requestanimationframe 的队列里，同样的回调函数只有一个。示例代码如下：

?

1 2 3 4 5 6 7 8 9 10

const onScroll = e => {     if (scheduledAnimationFrame) { return }        scheduledAnimationFrame = true     window.requestAnimationFrame(timestamp => {         scheduledAnimationFrame = false         animation(timestamp)     }) } window.addEventListener('scroll', onScroll)

　　5.与setTimeout和setInterval的区别

　　　　（1）requestanimationframe会把每一帧中的所有dom操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率

　　　　（2）在隐藏或不可见的元素中，requestanimationframe将不会进行重绘或回流，这当然就意味着更少的cpu、gpu和内存使用量

　　　　（3）requestanimationframe是由浏览器专门为动画提供的api，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了cpu开销

　　6.兼容性封装

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

if(!window.requestAnimationFrame) {  window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||  window.mozRequestAnimationFrame ||  window.oRequestAnimationFrame ||  window.msRequestAnimationFrame ||  function(callback) {   var self = this, start, finish;   return window.setTimeout(function() {    start = +new Date();    callback(start);    finish = +new Date();    self.timeout = 1000/60 - (finish - start);   }, self.timeout);  }); }

　　代码解析：

　　　　这段代码先检查了 window.requestanimationframe 函数的定义是否存在。如果不存在，就遍历已知的各种浏览器实现并替代该函数。如果还是找不到一个与浏览器相关的实现，它最终会采用基于javascript定时器的动画以每秒60帧的间隔调用settimeout函数。

　　　　mozrequestanimationframe() 会接收一个时间码（从1970年1月1日起至今的毫秒数），表示下一次重绘的实际发生时间。这样， mozrequestanimationframe() 就会根据这个时间码设定将来的某个时刻进行重绘。

　　　　 但是 webkitrequestanimationframe() 和 msrequestanimationframe() 不会给回调函数传递时间码，因此无法知道下一次重绘将发生在什么时间。 如果要计算两次重绘的时间间隔，firefox中可以使用既有的时间码，而在chrome和ie则可以使用不太精确地date()对象。

　　7.清除动画

　　　　cancelAnimationFrame(动画名) ，类似clearTimeout函数

　　　　

 六、总结

　　1.执行次数：setInterval执行多次，setTimeout、requestAnimationframe执行一次

　　2.性能：setTimeout会出现丢帧、卡顿现象，setInterval会出现调用丢失情况，requestAnimationframe不会出现这些问题，页面未激活时不会执行动画，减少了大量cpu消耗

　　3.兼容性问题：setInterval，setTimeout在IE浏览器中不支持参数传递，能够在大多数浏览器中正常使用。而requestAnimationframe不兼容IE10以下

七、面试题

　　1.setTimeout中的this指向问题

?

1 2 3 4 5 6 7 8

var i = 0; const o = {     i: 1;     fn: function(){         console.log(this.i);     } } setTimeout(o.fn, 1000); //执行后会打印出什么

　　　　错误思路：setTimeout执行，调用对象O的fn函数，由于调用者是对象O，那么this也指向了对象O，又对象O中有属性i，则会打印出1。

　　　　正解：因为setTimeout是window对象的方法，传入o.fn只是将o.fn这个函数传给了setTimeout，仍然是window对象在调用。上面代码执行的正确结果是0，是因为定义了全局变量i为0。如果没有定义，则会输出undefined。

　　　　ps：如果这里不是setTimeout执行这个函数，而是o.fn()，那么会输出1。

　　2.执行下面的代码，控制台如何输出

(function () {
    setTimeout(function () {
        alert(2);
    }, 0);

    alert(1);
})()  

　　　　先弹出的应该是1，而不是你以为“立即执行”的2。 settimeout，setinterval都存在一个最小延迟的问题，虽然你给的delay值为0，但是浏览器执行的是自己的最小值。html5标准是4ms，但并不意味着所有浏览器都会遵循这个标准，包括手机浏览器在内，这个最小值既有可能小于4ms也有可能大于4ms。在标准中，如果在settimeout中嵌套一个settimeout, 那么嵌套的settimeout的最小延迟为10ms。

　　3.执行下面的代码，控制台输出什么

?

1 2 3 4 5

for (var i = 1; i <= 5; i++) {   setTimeout(function timer() {     console.log(i)   }, i * 1000) }

　　　　输出结果大家都只是会是5个6，由于JavaScript是单线程的，按顺序执行，setTimeout是异步函数，它会将 timer 函数放到任务队列中，而此时会先将循环执行完毕再执行 timer 函数，因此当执行 timer 函数时 i 已经等于6了，所以最终会输出5个6

　　　　ps：解决办法有三种，我只贴代码了

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

//闭包 for (var i = 1; i <= 5; i++) {   (function(j) {     setTimeout(function timer() {       console.log(j)     }, j * 1000)   })(i) }   //给setTimeout传参 //方式一 IE不支持 for (var i = 1; i <= 5; i++) {   setTimeout(     function timer(j) {       console.log(j)     },     i * 1000,     i   ) }//方式二for (var i = 1; i <= 5; i++) {

?

1 2	(function(i){　　　　setTimeout(function(){　　　　　　　　console.log(i)　　　　},i * 1000)　　})(i) }

?

1 2 3 4 5 6 7

//ES6 let   for (let i = 1; i <= 5; i++) {   setTimeout(function timer() {     console.log(i)   }, i * 1000) }

　　4.使用settimeout代替setinterval进行间歇调用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

var executeTimes = 0; var intervalTime = 500; var intervalId = null;   // 放开下面的注释运行setInterval的Demo intervalId = setInterval(intervalFun,intervalTime); // 放开下面的注释运行setTimeout的Demo // setTimeout(timeOutFun,intervalTime);   function intervalFun(){     executeTimes++;     console.log("doIntervalFun——"+executeTimes);     if(executeTimes==5){         clearInterval(intervalId);     } }   function timeOutFun(){     executeTimes++;     console.log("doTimeOutFun——"+executeTimes);     if(executeTimes<5){         setTimeout(arguments.callee,intervalTime);     } }

　　代码比较简单，我们只是在settimeout的方法里面又调用了一次settimeout，就可以达到间歇调用的目的。 setinterval间歇调用，是在前一个方法执行前，就开始计时，比如间歇时间是500ms，那么不管那时候前一个方法是否已经执行完毕，都会把后一个方法放入执行的序列中。这时候就会发生一个问题，假如前一个方法的执行时间超过500ms，加入是1000ms，那么就意味着，前一个方法执行结束后，后一个方法马上就会执行，因为此时间歇时间已经超过500ms了。

　　5.利用settimeout来实现setinterval

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function interval(func, w, t){     var interv = function(){         if(typeof t === "undefined" || t-- > 0){             setTimeout(interv, w);             try{                 func.call(null);             }             catch(e){                 t = 0;                 throw e.toString();             }         }     };       setTimeout(interv, w); };

参考文档：https://blog.csdn.net/weixin_34204057/article/details/89009605

　　　　　http://www.luyixian.cn/javascript_show_149688.aspx

　　　　　https://juejin.im/post/5c89fe42e51d455bb15c1ed1

　　　　　https://www.cnblogs.com/icctuan/p/12103697.html　　

　　　　　

***********转摘：https://www.cnblogs.com/spoem/p/13214089.html