requestAnimationFrame 和setTimeou

requestAnimationFrame

• 浏览器帧渲染的钩子函数，一般不渲染不触发
• 做动画比较合适因为这个函数在每帧渲染的开始与上一帧结束的时候触发，能最大限度的利用浏览器的渲染流程
• window.requestAnimationFrame() 告诉浏览器，你想执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。

requestAnimationFrame 优势：

1、使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源
2、而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染
3、当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
4、函数节流：为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销
5、一个刷新间隔内函数执行多次时没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。

setTimeout

• setTimeout这个方法的意思是在1000ms之后再执行do something,
• 但是如果1000ms 主线程不是空闲的，还是不能执行的，所以这个时间还是有可能延迟的；

setInterval

• 时间间隔或许跳过
• 时间间隔可能小于定时调用代码的时间；

function Test () {
  this.name = "庆祝亚运会";
}

Test.prototype.getName = function () {
  console.log(this.name);
};

Test.prototype.testInterval = function () {
  var interval = setInterval(this.getName, 1000);
};

var test = new Test();
test.testInterval();
————————————————
每隔一秒输出的一个 undefined，

// 在上面代码的基础上修改 代码
Test.prototype.testInterval = function () {
  var interval = setInterval(this.getName.bind(this), 1000);
};

• 在浏览器执行环境下，他们三个都是window 对象的方法；函数中this 指向调用函数的对象；

参考链接： https://blog.csdn.net/qingyafan/article/details/52335753