動畫幀requestAnimationFrame / 取消動畫幀cancelAnimationFrame(index)

requestAnimationFrame 動畫幀         性能好

1.會把每一幀中的所有DOM操作集中起來，在一次重繪或迴流中就完成，並且重繪或迴流的時間間隔緊緊跟隨瀏覽器的刷新頻率

2.在隱藏或不可見的元素中，將不會進行重新重繪或迴流

        語法：requestAnimationFrame（callback）

        參數：callback下一次重繪之前更新動畫幀所調用的函數

        返回值：動畫幀id

---

定時器對比動畫幀

定時器的問題

丟幀，頻率刷新率60，電腦每秒100幀，最小間隔1.67ms，會出現丟幀

 

動畫幀

動畫幀只執行一次，所以內部用遞歸，自己調用自己

對比：

定時器會卡頓丟幀，動畫幀流程些

---

取消動畫幀 cancelAnimationFrame(index) 

---

IE9及以下低版本不支持動畫幀，兼容性處理

---