淺談throttle以及debounce的原理和實現

jsbintask 發布于2019-08-20 19:08 / 1794人閱讀

摘要：淺談以及的原理和實現背景日常開發中我們經常會遇到一些需要節流調用或者壓縮調用次數的情況例如之前我在完成一個需求的時候就遇到了因為后端并發問題導致收到多條信息從而導致函數被重復調用的情況當時的做法是通過對函數的調用進行注冊遇到多次調用的時候清

淺談throttle以及debounce的原理和實現 背景

日常開發中,我們經常會遇到一些需要節流調用,或者壓縮調用次數的情況,例如之前我在完成一個需求的時候,就遇到了因為后端并發問題,導致收到多條socket信息從而導致函數被重復調用的情況,當時的做法是通過setTimeout對函數的調用進行注冊,遇到多次調用的時候,清空前一次的調用,以后一次為準.后來在閱讀underscore源碼的時候,發現這種做法與debounce以及throttle的實現不謀而合.因而簡單記錄一下.

throttle與debounce

throttle與debounce在用于控制函數的多次調用的時候,非常的有效.throttle函數能夠控制目標函數在一定的時間內最多只會調用一次.而debounce函數,則可以壓縮調用的次數,把多次函數調用壓縮成只調用一次(多次的函數調用之間的間隔不能超過規定的時間間隔).
這樣文字描述起來可能比較難理解,不過不要緊,當初我在看underscore源碼的時候,也是非常難以理解這兩個函數的需求,感覺好像都差不多一樣.而且underscore在1.1.3版本中,采用了相同的底層實現,只是接口傳入的參數不同而已.因而我們這里采用一個坐電梯的例子來說明.

debounce電梯

假設你正在準備乘坐電梯,并且電梯門準備關上然后上升的時候,你的同事來了,出于禮貌,我們需要停止電梯的關閉,讓同事進入.假設源源不斷的有同事進來的話,電梯就需要處于一種待機的狀態,一直等待人員的進入,直到沒有新的同事進入或者說電梯滿了,這個時候,電梯才能運行.另外,同事的進入需要在電梯門的關閉之前,否則的話,就只能等下一趟了.
換成圖示我們可以這么理解

上面一排方塊為函數的調用,下面的方塊則是函數實際的運行.我們可以看到,即使函數多次調用,在短暫的暫停后,函數只會運行一次.

debounce運用場景

既然debounce函數可以把多次的函數調用壓縮成一次,那么我們在進行Markdown渲染的時候,就可以排上用場了.如果我們在每一次鍵盤的敲擊都進行一次Markdown渲染,必然會造成部分的計算冗余,同時也可能因為多次無畏的渲染導致頁面卡頓,影響體驗,因而我們可以使用debounce函數,把Markdown的渲染進行壓縮,只在鍵盤敲擊結束了一定的時間后((可以完成一次詞語或者語句的輸入),再進行渲染,能夠減少許多冗余的計算,提高體驗.

throttle電梯

throttle電梯不想debounce電梯一樣會無限的等待,而是我們設定一個時間,例如10s,那么10s內,其他的人可以不斷的進入電梯,但是,一旦10s過去了,那么無論如何,電梯都會進入運行的狀態.

換成圖示,我們可以這么理解

上面一排的方塊是函數的調用,我們可以看到,及時進行了多次的函數調用,函數也只會在隔一段時間實際運行一次,不會每一次的函數調用都運行

throttle運用場景

throttle也有另外一個稱號,就是節流函數,顧名思義就是能夠節省函數調用時的資源消耗,達到防止系統資源被一直大量占用,從而影響其他函數執行的情況.throttle一個運用的比較廣泛的場景則是通過對scroll函數進行節流,因為每一次滾動頁面,都有進行資源的消耗計算,但是完全沒必要每一次滾動時間觸發的時候,都進行計算,這樣有可能會導致大量的計算堆積而出現跳幀的情況發生,因而我們需要使用throttle函數進行節流,在滾動事件發生了一段事件后,再統一的進行處理,只要時間設置的合理,用戶一般是感知不到的.

debounce與throttle的原理與實現

解釋的再多,也不如我們直接自己實現一遍debounce與throttle,這樣對于兩個函數的運用和理解,都會更上一層樓.debounce與throttle在許多的庫,例如jQuery,loadash以及underscore中都有實現,這里采用underscore的1.1.3版本的實現,非常簡單而且能夠達到目的(其實主要是最近在看underscore源碼)
代碼如下

    // throttle 和 debouce 函數的底層實現
    var limit = function(func, wait, debounce) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            // 封裝函數,用于延遲調用
            var throttler = function() {
                // 只是節流函數的時候,對其timeout進行賦值為null,這樣可以設置下一次的setTimtout
                timeout = null;
                func.apply(context, args);
            };
            // 如果debouce是true的話,前一個函數的調用timeout會被清空,不會被執行
 ? ? ? ? ? ?// 就是debounce函數的調用,這個前一個函數的不會執行.下面會重新設定setTimeout用于
 ? ? ? ? ? ?// 執行這一次的調用.
 ? ? ? ? ? ?// 但是如果是throttle函數,則會執行前一個函數的調用,同時下面的setTimeout在
 ? ? ? ? ? ?// 函數沒有運行的時候,是無法再次設定的.
 ? ? ? ? ? ?if (debounce) clearTimeout(timeout);
            // 如果debouce是true 或者 timeout 為空的情況下,設置setTimeout
            if (debounce || !timeout) timeout = setTimeout(throttler, wait);
        };
    };

    // throttle 節流函數
    _.throttle = function(func, wait) {
        return limit(func, wait, false);
    };

    // debouce 多次調用,只執行最后一次.
    _.debounce = function(func, wait) {
        return limit(func, wait, true);
    };

代碼上面都加了注釋,比較好理解,而且也比較簡單.通過代碼,我們可以更加進一步的理解debounce與throttle的原理以及實現,主要都是通過標志位來判斷是否要清空setTimeout以及是否要生成新的setTimeout

至此,debounce與throttle的原理以及實現基本就介紹完成了.寫的不是特別的流暢,大家湊合著看,主要還是用于記錄在日常工作中以及在源碼閱讀中遇到的一些小發現和小靈感.

參考

jQuery throttle / debounce: Sometimes, less is more!

云服務器 GPU云服務器 volatile的實現原理回調的原理、實現與應用 cdn的原理和架構免費的域名以及服務器

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

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

淺談 Underscore.js 中 _.throttle 和 _.debounce 的差異

摘要：如果想忽略結尾邊界上的調用，傳入返回客戶調用函數上次執行時間點延遲執行函數若設定了開始邊界不執行選項，上次執行時間始終為首次執行時，如果設定了開始邊界不執行選項，將上次執行時間設定為當前時間。 Underscore.js 是一個很精干的庫，壓縮后只有5.2KB。它提供了幾十種函數式編程的方法，彌補了標準庫的不足，大大方便了JavaScript的編程。本文僅探討Unde...

miracledan 2019-08-21 10:20 評論0 收藏0
淺談 Underscore.js 中 _.throttle 和 _.debounce 的差異

摘要：如果想忽略結尾邊界上的調用，傳入返回客戶調用函數上次執行時間點延遲執行函數若設定了開始邊界不執行選項，上次執行時間始終為首次執行時，如果設定了開始邊界不執行選項，將上次執行時間設定為當前時間。文章轉自：https://blog.coding.net/blog/...注： _.throttle 和 _.debounce是Underscore.js庫的兩個針對函數節流的方法，用于處理高頻...

alighters 2019-08-20 12:11 評論0 收藏0
前端進擊的巨人（八）：淺談函數防抖與節流

摘要：隆重請出主角防抖與節流。防抖與節流的異同相同都是防止某一時間段內，函數被頻繁調用執行，通過時間頻率控制，減少回調函數執行次數，來實現相關性能優化。參考文章分鐘理解的節流防抖及使用場景函數防抖和節流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題，或許早已是爛大街的解讀文章。不過春招系列面試下來，不少伙伴們還...

_Zhao 2019-08-23 15:37 評論0 收藏0
淺談js防抖和節流

摘要：防抖和節流嚴格算起來應該屬于性能優化的知識，但實際上遇到的頻率相當高，處理不當或者放任不管就容易引起瀏覽器卡死。防抖和節流嚴格算起來應該屬于性能優化的知識，但實際上遇到的頻率相當高，處理不當或者放任不管就容易引起瀏覽器卡死。所以還是很有必要早點掌握的。（信我，你看完肯定就懂了）從滾動條監聽的例子說起先說一個常見的功能，很多網站會提供這么一個按鈕：用于返回頂部。showImg(ht...

opengps 2019-08-26 13:32 評論0 收藏0
underscore debounce函數分析

摘要：函數分析標簽空格分隔本文是源碼剖析系列第六篇文章，上節我們介紹了節流函數的實現，這節將會介紹一下節流函數的兄弟防抖動函數。函數是在高頻率觸發的情況下，為了防止函數的頻繁調用，將其限制在一段時間內只會調用一次。 underscore debounce函數分析標簽（空格分隔）： underscore 本文是underscore源碼剖析系列第六篇文章，上節我們介紹了throttle節流函...

worldligang 2019-08-22 15:41 評論0 收藏0