requestAnimationFrame 實現1s

e10101 發布于2019-08-02 14:32 / 2592人閱讀

摘要：概述通過實現對特定時間的控制，探其使用方式不適用或的原因，他們實現性能差，受硬件影響大，計時不準確。時間，單位是調用方式后我被成功執行了

概述

通過 requestAnimationFrame 實現對特定時間的控制，探其使用方式

不適用 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 )
})

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53874.html

requestAnimationFrame 實現1s

摘要：概述通過實現對特定時間的控制，探其使用方式不適用或的原因，他們實現性能差，受硬件影響大，計時不準確。時間，單位是調用方式后我被成功執行了概述通過 requestAnimationFrame 實現對特定時間的控制，探其使用方式不適用 setTimeout 或 setInterval 的原因，他們實現性能差，受硬件影響大，計時不準確。源碼實現 function times( ...

Karrdy 2019-08-23 15:56 評論0 收藏0
requestAnimationFrame 實現1s

摘要：概述通過實現對特定時間的控制，探其使用方式不適用或的原因，他們實現性能差，受硬件影響大，計時不準確。時間，單位是調用方式后我被成功執行了概述通過 requestAnimationFrame 實現對特定時間的控制，探其使用方式不適用 setTimeout 或 setInterval 的原因，他們實現性能差，受硬件影響大，計時不準確。源碼實現 function times( ...

NoraXie 2019-08-02 16:08 評論0 收藏0
requestAnimationFrame 實現1s

摘要：概述通過實現對特定時間的控制，探其使用方式不適用或的原因，他們實現性能差，受硬件影響大，計時不準確。時間，單位是調用方式后我被成功執行了概述通過 requestAnimationFrame 實現對特定時間的控制，探其使用方式不適用 setTimeout 或 setInterval 的原因，他們實現性能差，受硬件影響大，計時不準確。源碼實現 function times( ...

Jrain 2019-08-26 13:38 評論0 收藏0
演示當定時器在頁面最小化時無法執行

　　我們講述的是關于 ahooks 源碼系列文章的第七篇，總結主要講述下面幾點：　　鞏固 React hooks 的理解?！　W習如何抽象自定義 hooks。構建屬于自己的 React hooks 工具庫。　　培養閱讀學習源碼的習慣，工具庫是一個對源碼閱讀不錯的選擇。　　注：本系列對 ahooks 的源碼解析是基于v3.3.13。自己 folk 了一份源碼，主要是對源碼做了一些解讀，可見詳情?！　?..

3403771864 2022-10-23 13:12 評論0 收藏0
【前端優化】動畫幾種實現方式總結和性能分析

摘要：備注沒整理格式，抱歉動畫實現的幾種方式性能排序實現方式自身調用調用的定時器值推薦最小使用的原因即每秒幀為什么倒計時動畫一定要用而避免使用兩者區別及引發的線程討論線程討論為什么單線程是的一大特性。備注：沒整理格式，抱歉動畫實現的幾種方式：性能排序js < requestAnimationFrame 3->4->2. 那么在來看你這段代碼。 var t = true; window...

IamDLY 2019-08-23 15:35 評論0 收藏0