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
