50行程式碼實現的高效能動畫定時器 raf-interval

寫在前面

raf-interval 是基於 window.requestAnimationFrame() 封裝的定時器。

• Github: https://github.com/dntzhang/raf-interval

window.requestAnimationFrame() 方法告訴瀏覽器您希望執行動畫，並請求瀏覽器呼叫指定的函式在下一次重繪之前更新動畫。該方法將在重繪之前呼叫的回撥作為引數。所以

如果您想在下一個重繪時為另一個框架設定動畫，您的回撥例程必須呼叫 requestAnimationFrame()。
如果你想做逐幀動畫的時候，你應該用這個方法。這就要求你的動畫函式執行會先於瀏覽器重繪動作。通常來說，被呼叫的頻率是每秒60次，但是一般會遵循W3C標準規定的頻率。如果是後臺標籤頁面，重繪頻率則會大大降低。

通過 raf-interval 我們可以把抽象的物件的自身的迴圈邏輯通過 setRafInterval 書寫在自身的程式碼裡，但是卻執行在唯一的 ticker，這樣邏輯不會被拆得支離破碎，更好維護方便擴充套件。

API

• setRafInterval 開啟定時器
• clearRafInterval 清除定時器

和setInterval 和 clearInterval 用法一致！超級簡便

特性

• 和 setInterval clearInterval 一樣的使用方式
• 當使用者切到其他tab自動停止迴圈，低功耗，更省電
• 簡單的API就能製作高效能絲般順滑的的動畫效果
• 智慧地停止的開啟迴圈

使用

沒有 raf-interval 之前:

var i = 0
var interval = setInterval(function() {
    console.log(i++)
    if (i > 6) {
        clearInterval(interval)
    }
},1000)

有了 raf-interval 之後:

var i = 0
var rafInterval = setRafInterval(function() {
    console.log(i++)
    if (i > 6) {
        clearRafInterval(rafInterval)
    }
},1000)

安裝

$ npm install raf-interval

或者從 CDN 拉取:

• https://unpkg.com/raf-interval@0.3.0/raf-interval.js

License

This content is released under the MIT License.