requestAnimationFrame 實現1s

概述

1. 經過 requestAnimationFrame 實現 對特定時間的控制，探其使用方式
2. 不適用 setTimeout 或 setInterval 的緣由，他們實現性能差，受硬件影響大，計時不許確。

源碼實現

function times( cb=()=>{}, timeStamp ){
    let prev = Date.now();
    const origin = prev;
    let cur = 0;
    let timer = requestAnimationFrame(function(){
        cur = Date.now();
        if( cur - prev > timeStamp ){
            cb( prev, cur, origin ); // prev: 前一個, cur: 當前, origin: 起始時間,  
            prev = cur;
        }
        timer && cancelAnimationFrame( timer );
        timer = requestAnimationFrame( arguments.callee );
    });
}

參數解釋

1. cb 回調函數， 執行特定時間後的回調
   回調函數默認帶回 prev, cur, origin 三個參數：
       prev：函數執行上一次時刻記錄。 
       cur：當前時刻記錄。
       origin： 函數初次調用時的時刻。
2. timeStamp 時間， 單位是 ms

調用方式

times((prev, cur, origin )=>{
    const diff = Math.floor( (cur - origin) / 1000 );
    console.log('1s 後我被成功執行了', 1000 )
})