requestAnimationFrame 實(shí)現(xiàn)1s

Karrdy 發(fā)布于2019-08-23 15:56 / 1420人閱讀

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

概述

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

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

源碼實(shí)現(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: 前一個(gè), cur: 當(dāng)前, origin: 起始時(shí)間,  
            prev = cur;
        }
        timer && cancelAnimationFrame( timer );
        timer = requestAnimationFrame( arguments.callee );
    });
}

參數(shù)解釋

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

調(diào)用方式

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

GPU云服務(wù)器云服務(wù)器 requestAnimationFram 小米1s F1S存儲(chǔ) 釘釘考勤機(jī)m1s

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/102568.html

相關(guān)文章

requestAnimationFrame 實(shí)現(xiàn)1s

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

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

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

Jrain 2019-08-26 13:38 評(píng)論0 收藏0
requestAnimationFrame 實(shí)現(xiàn)1s

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

e10101 2019-08-02 14:32 評(píng)論0 收藏0
演示當(dāng)定時(shí)器在頁(yè)面最小化時(shí)無(wú)法執(zhí)行

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

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

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

IamDLY 2019-08-23 15:35 評(píng)論0 收藏0