JavaScript：函數防抖與函數節流

elina 發布于2019-08-23 15:26 / 1710人閱讀

摘要：函數防抖簡單實現模擬請求獲取函數的作用域和變量清除定時器節流名詞解釋連續執行函數，每隔一定時間執行函數。效果函數防抖是某一段時間內只執行一次函數節流是間隔時間執行，不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數。

防抖（debounce）

名詞解釋：在事件被觸發n秒后再執行回調函數，如果在這n秒內又被觸發，則重新計時。

使用場景：以百度輸入框例，比如你要查詢XXx，想實現輸完了XXx之后，再進行搜索請求，這樣可以有效減少請求次數，節約請求資源。

函數防抖簡單實現

節流（throttle）

名詞解釋：連續執行函數，每隔一定時間執行函數。規定一個單位時間，在這個單位時間內，只能有一次觸發事件的回調函數執行，如果在同一個單位時間內某事件被觸發多次，只有一次能生效。

使用場景：鼠標連續多次click事件，mousemove 事件，監聽滾動事件，比如是否滑到底部自動加載更多等等...

函數節流簡單實現

function throttle(fn, delay) {
    let lastTime; 
    let timer; 
    delay || (delay = 300); // 默認間隔為300ms
    return function(arguments) {
        let context = this;
        let args = arguments;
        let nowTime = +new Date(); // 獲取系統當前的時間
        if (lastTime && nowTime < lastTime+ delay) { // 當前距離上次執行的時間小于設置的時間間隔
            clearTimeout(timer); // 清除定時器
            timer = setTimeout(function() { // delay時間后，執行函數
                lastTime= nowTime ;
                fn.apply(context, args);
            }, delay);
        } else { // 當前距離上次執行的時間大于等于設置的時間，直接執行函數
            lastTime= nowTime ;
            fn.apply(context, args);
        }
    };
}

區別:

可以用日常進入電梯來舉例，形象地描述節流和防抖的區別

函數防抖：如果A在10：00:00開門走入電梯內（觸發事件），如果后續沒有人進入電梯，電梯將在5秒鐘之后10：00:05關門（執行事件監聽器）。這時如果B在10：00:04走入電梯內，電梯會在10：00:09才關門。

函數節流：如果A在10：00:00開門走入電梯內（觸發事件），如果后續沒有人進入電梯，電梯將在5秒鐘之后10：00:05關門（執行事件監聽器）。這時如果B在10：00:04走入電梯內，電梯同樣是在10：00:05關門。這個時間從第一個人進入電梯開始計時，不管在5秒之內進來多少人，電梯都會在10：00:05關門。如果一直沒有人進來，則電梯不運行。

總結:

根據實際業務場景，合理的利用debounce（防抖）和throttle（節流）可以優化性能和提高用戶體驗。

效果：
函數防抖是某一段時間內只執行一次；
函數節流是間隔時間執行，不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數。

原理：
防抖是維護一個計時器，規定在delay時間后觸發函數，但是在delay時間內再次觸發的話，都會清除當前的 timer 重新計時。這樣一來，只有最后一次操作事件才被真正觸發。
節流是通過判斷是否到達一定時間來觸發函數，若沒到規定時間則使用計時器延后，而下一次事件則會重新設定計時器。

GPU云服務器云服務器 VUE防抖與節流函數節流 js函數節流 javascript 函數

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

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

高級函數技巧-函數防抖與節流

摘要：封裝方法也比較簡單，書中對此問題也進行了處理使用定時器，讓函數延遲秒后執行，在此秒內，然后函數再次被調用，則刪除上次的定時器，取消上次調用的隊列任務，重新設置定時器。在實際開發中，函數一定是最實用最頻繁的一部分，無論是以函數為核心的函數式編程，還是更多人選擇的面向對象式的編程，都會有函數的身影，所以對函數進行深入的研究是非常有必要的。函數節流比較直白的說，函數節流就是強制規定一...

whinc 2019-08-22 11:21 評論0 收藏0
The debounce & throttle in Javascript（防抖與節流）

摘要：您的支持是我最大的動力，我會保證提供高質與清晰的文章與您共同成長。一些文章中的與上面所談到的設置類似。防抖防抖技術允許我們捆綁多個連續調用成為單一的一次調用。防抖的應用這個簡單的舉個歡迎star和watch我的github issue blog，歡迎加入討論。您的支持是我最大的動力，我會保證提供高質與清晰的文章與您共同成長。節流[throttle]與防抖[debounce]在前...

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

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

_Zhao 2019-08-23 15:37 評論0 收藏0
前端筆記(二) 對象的深淺拷貝，函數的防抖與節流，函數柯里化，圖片的預加載與懶加載

摘要：對象是無法通過這種方式深拷貝。這就是函數防抖和節流要做的事情。函數防抖當觸發頻率過高時函數基本停止執行而函數節流則是按照一定的頻率執行事件。對象的深淺拷貝對象的深拷貝與淺拷貝的區別：淺拷貝：僅僅復制對象的引用, 而不是對象本身。深拷貝：把復制的對象所引用的全部對象都復制一遍淺拷貝的實現： var obj = { age : 18, person : { ...

dongxiawu 2019-08-26 11:43 評論0 收藏0
函數防抖與節流

摘要：函數防抖就是讓某個函數在上一次執行后，滿足等待某個時間內不再觸發此函數后再執行，而在這個等待時間內再次觸發此函數，等待時間會重新計算。 underscore.js提供了很多很有用的函數，今天想說說其中的兩個。這兩個函數都用于限制函數的執行。 debounce 在解釋這個函數前，我們先從一個例子看下這個函數的使用場景。假設我們網站有個搜索框，用戶輸入文本我們會自動聯想匹配出一些結果供...

Mr_zhang 2019-08-21 10:31 評論0 收藏0