JS實現(xiàn)函數(shù)節(jié)流

gplane 發(fā)布于2019-08-22 16:44 / 1622人閱讀

摘要：函數(shù)節(jié)流是確保函數(shù)特定的時間內(nèi)至多執(zhí)行一次。是否節(jié)流的開關(guān)通過一個閉包來保持對每次函數(shù)執(zhí)行的時間戳的引用立即執(zhí)行，跳過節(jié)流暫停節(jié)流恢復(fù)節(jié)流使用實例

函數(shù)節(jié)流：是確保函數(shù)特定的時間內(nèi)至多執(zhí)行一次。
如js滾動事件非常頻繁，稍微滾動一下就會觸發(fā)許多次，如果頻繁觸發(fā)的滾動，每一次都去檢查是否到頁面底部了再次造成了浪費。于是設(shè)置一個開關(guān)，一次只能有一個觸發(fā)執(zhí)行，并對執(zhí)行設(shè)置計時一段時間再執(zhí)行，執(zhí)行完畢之后再解鎖。這就是函數(shù)節(jié)流。
實現(xiàn)思路：通過內(nèi)部使用閉包來緩存上次觸發(fā)函數(shù)的時間戳，然后檢驗本次函數(shù)執(zhí)行時的時間戳和上次緩存的時間戳之差是否小于傳入的時間值參數(shù)。

 const restrictFn = (fn, wait) => {
        let stime = 0,
            etime;
        let isPause = false;//是否節(jié)流的開關(guān)

        function result() {//通過一個閉包來保持對每次函數(shù)執(zhí)行的時間戳的引用
            etime = Date.now();
            if (etime - stime < wait && isPause === false) {
                return;
            } else {
                fn()
            }
            stime = etime;
        }
        result.flash = function () {//立即執(zhí)行，跳過節(jié)流
            fn()
        }
        result.pause = function () {//暫停節(jié)流
            isPause = true;
        }
        result.resume = function () {//恢復(fù)節(jié)流
            isPause = false;
        }
        return result;
    }

使用實例：

    function print() {
        console.log("print something")
    }
    let restrictedPrint = restrictFn(print,1000);

GPU云服務(wù)器云服務(wù)器 js函數(shù)節(jié)流函數(shù)節(jié)流實現(xiàn)strcmp函數(shù) 虛函數(shù)實現(xiàn)原理

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

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

相關(guān)文章

JS進階篇3---函數(shù)“節(jié)流” VS “防抖”

摘要：目的都是為了降低回調(diào)函數(shù)執(zhí)行頻率，節(jié)省計算機資源，優(yōu)化性能，提升用戶體驗。函數(shù)防抖事件頻繁觸發(fā)的情況下，只有經(jīng)過足夠的空閑時間，才執(zhí)行代碼一次。函數(shù)節(jié)流和函數(shù)防抖的對比分析一、前言前端開發(fā)中，函數(shù)節(jié)流（throttle）和函數(shù)防抖（debounce）作為常用的性能優(yōu)化方法，兩者都是用于優(yōu)化高頻率執(zhí)行 js 代碼的手段，那具體它們有什么異同點呢？有對這兩個概念不太了解的小伙伴...

hlcc 2019-08-23 18:21 評論0 收藏0
JS專題之節(jié)流函數(shù)

摘要：一什么是節(jié)流節(jié)流函數(shù)就是讓事件處理函數(shù)在大于等于執(zhí)行周期時才能執(zhí)行，周期之內(nèi)不執(zhí)行，即事件一直被觸發(fā)，那么事件將會按每小段固定時間一次的頻率執(zhí)行。我們通過一個簡單的示意來理解節(jié)流函數(shù)可以用時間戳和定時器兩種方式進行處理。本文共 2000 字，讀完只需 8 分鐘上一篇文章講了去抖函數(shù)，然后這一篇講同樣為了優(yōu)化性能，降低事件處理頻率的節(jié)流函數(shù)。一、什么是節(jié)流？節(jié)流函數(shù)（thrott...

huaixiaoz 2019-08-23 14:01 評論0 收藏0
JS進階篇1---函數(shù)節(jié)流（throttle）

摘要：主要實現(xiàn)思路就是通過定時器，通過設(shè)置延時時間，在第一次調(diào)用時，創(chuàng)建定時器，寫入需要執(zhí)行的函數(shù)。如果這時前一個定時器暫未執(zhí)行，則將其替換為新的定時器。 JS中的函數(shù)節(jié)流一、什么是函數(shù)節(jié)流（throttle）概念：限制一個函數(shù)在一定時間內(nèi)只能執(zhí)行一次。舉個栗子，坐火車或地鐵，過安檢的時候，在一定時間（例如10秒）內(nèi)，只允許一個乘客通過安檢入口，以配合安檢人員完成安檢工作。上例中，每1...

zhou_you 2019-08-23 18:18 評論0 收藏0
JS之節(jié)流和防抖

摘要：節(jié)流在指定時間之內(nèi)，讓函數(shù)只觸發(fā)一次。防抖對于一定時間段的連續(xù)的函數(shù)調(diào)用，只讓其執(zhí)行一次?？偨Y(jié)以上只是很簡單的寫了一下節(jié)流和防抖的原理，在里，實現(xiàn)起來更加復(fù)雜，但是背后的原理核心就是上邊代碼寫的。概述在平時的開發(fā)中，經(jīng)常會聽到兩個差不多很相近的詞。節(jié)流（throttle）和防抖（debounce）。這是兩個類似又有些不同的優(yōu)化方案。節(jié)流：在指定時間之內(nèi)，讓函數(shù)只觸發(fā)一次。防...

fevin 2019-08-26 17:15 評論0 收藏0
徹底弄懂函數(shù)防抖和函數(shù)節(jié)流

摘要：若時間差大于間隔時間，則立刻執(zhí)行一次函數(shù)。不同點函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用和實現(xiàn)。函數(shù)防抖關(guān)注一定時間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時間內(nèi)只執(zhí)行一次。原博客地址，歡迎star 函數(shù)防抖和節(jié)流函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標(biāo)的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 評論0 收藏0
JS函數(shù)節(jié)流和函數(shù)防抖

摘要：為什么需要函數(shù)防抖和函數(shù)節(jié)流在瀏覽器中某些計算和處理要比其他的昂貴很多。函數(shù)防抖如果一個事件被頻繁觸發(fā)多次，并且觸發(fā)的時間間隔過短，則防抖函數(shù)可以使得對應(yīng)的事件處理函數(shù)只執(zhí)行最后觸發(fā)的一次。函數(shù)防抖可以把多個順序的調(diào)用合并成一次。 1.為什么需要函數(shù)防抖和函數(shù)節(jié)流？在瀏覽器中某些計算和處理要比其他的昂貴很多。例如DOM操作比起非DOM交互需要更多的內(nèi)存和CPU占用時間。連續(xù)嘗試進行...

doodlewind 2019-08-23 13:48 評論0 收藏0