JS實現函數節流

gplane 發布于2019-08-22 16:44 / 1609人閱讀

摘要：函數節流是確保函數特定的時間內至多執行一次。是否節流的開關通過一個閉包來保持對每次函數執行的時間戳的引用立即執行，跳過節流暫停節流恢復節流使用實例

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

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

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

使用實例：

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

GPU云服務器云服務器 js函數節流函數節流實現strcmp函數虛函數實現原理

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

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

JS進階篇3---函數“節流” VS “防抖”

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

hlcc 2019-08-23 18:21 評論0 收藏0
JS專題之節流函數

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

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

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

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

摘要：節流在指定時間之內，讓函數只觸發一次。防抖對于一定時間段的連續的函數調用，只讓其執行一次。總結以上只是很簡單的寫了一下節流和防抖的原理，在里，實現起來更加復雜，但是背后的原理核心就是上邊代碼寫的。概述在平時的開發中，經常會聽到兩個差不多很相近的詞。節流（throttle）和防抖（debounce）。這是兩個類似又有些不同的優化方案。節流：在指定時間之內，讓函數只觸發一次。防...

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

摘要：若時間差大于間隔時間，則立刻執行一次函數。不同點函數防抖，在一段連續操作結束后，處理回調，利用和實現。函數防抖關注一定時間連續觸發的事件只在最后執行一次，而函數節流側重于一段時間內只執行一次。原博客地址，歡迎star 函數防抖和節流函數防抖和函數節流：優化高頻率執行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 評論0 收藏0
JS函數節流和函數防抖

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

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