「js高手之路」html5新增定時器requestAnimationFrame實戰進度條

html5為什麼新增一個requestAnimationFrame，他的出現是為了解決什麼問題？

優勢與特點：

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

2)在隱藏或不可見的元素中，requestAnimationFrame將不會進行重繪或迴流，這當然就意味著更少的CPU、GPU和內存使用量

3)requestAnimationFrame是由瀏覽器專門為動畫提供的API，在運行時瀏覽器會自動優化方法的調用，並且如果頁面不是激活狀態下的話，動畫會自動暫停，有效節省了CPU開銷

一句話就是：這玩意性能高，不會卡屏，根據不同的瀏覽器自動調整幀率。如果看不懂或者不理解，也沒有什麼關係，這玩意跟瀏覽器渲染原理有關。我們先學會使用它！

如何使用requestAnimationFrame？

使用方式跟定時器setTimeout差不多，不同之處在於，他不需要設置時間間隔參數

參數是一個回調函數，返回值是一個整數，用來表示定時器的編號.

cancelAnimationFrame用來關閉定時器

這個方法需要處理兼容：

簡單的兼容：

如果瀏覽器都不認識AnimationFrame，就用setTimeout兼容.

運用3種不同的定時器（setTimeout, setInterval, requestAnimationFrame）實現一個進度條的載入

一、setInterval方式：

二、setTimeout方式

三、requestAnimationFrame方式

（作者:ghostwu, 出處:http://www.cnblogs.com/ghostwu 博客大多數文章均屬原創，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利）

· 學IT，就來中公優就業：http://www.ujiuye.com/

· 2017年【中公教育】特別推出2017年就業促進計劃，500萬就業基金助你成為IT達人

詳情請戳http：//www.ujiuye.com/zt/jycj/?wt.bd=bgz

· 什麼？海量IT學習資料白給你都不要？別想了，加群搶：584539956

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！