<del id="2gk0y"></del>

requestAnimationFrame 實現(xiàn)1s

e10101 發(fā)布于2019-08-02 14:32 / 2599人閱讀

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

概述

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

不適用 setTimeout 或 setInterval 的原因，他們實現(xiàn)性能差，受硬件影響大，計時不準確。

源碼實現(xiàn)

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 );
    });
}

參數(shù)解釋

1. cb 回調(diào)函數(shù)， 執(zhí)行特定時間后的回調(diào)
   回調(diào)函數(shù)默認帶回 prev, cur, origin 三個參數(shù)：
       prev：函數(shù)執(zhí)行上一次時刻記錄。 
       cur：當前時刻記錄。
       origin： 函數(shù)初次調(diào)用時的時刻。
2. timeStamp 時間， 單位是 ms

調(diào)用方式

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53874.html

相關(guān)文章

requestAnimationFrame 實現(xiàn)1s

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

Karrdy 2019-08-23 15:56 評論0 收藏0
requestAnimationFrame 實現(xiàn)1s

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

NoraXie 2019-08-02 16:08 評論0 收藏0
requestAnimationFrame 實現(xiàn)1s

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

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

　　我們講述的是關(guān)于 ahooks 源碼系列文章的第七篇，總結(jié)主要講述下面幾點：　　鞏固 React hooks 的理解。　　學習如何抽象自定義 hooks。構(gòu)建屬于自己的 React hooks 工具庫?！　∨囵B(yǎng)閱讀學習源碼的習慣，工具庫是一個對源碼閱讀不錯的選擇?！　∽ⅲ罕鞠盗袑?ahooks 的源碼解析是基于v3.3.13。自己 folk 了一份源碼，主要是對源碼做了一些解讀，可見詳情?！　?..

3403771864 2022-10-23 13:12 評論0 收藏0
【前端優(yōu)化】動畫幾種實現(xiàn)方式總結(jié)和性能分析

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

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