前端優化 —— 函數的節流和防抖

ralap 發布于2019-08-23 12:18 / 756人閱讀

摘要：文件為函數要傳入的參數返回事件處理函數添加事件監聽節流函數一般用于事件的情況較多，因為這些事件的觸發是連續性的，需要在一個時間間隔內只觸發一次。

閱讀原文

前言

在前端開發當中我們經常會綁定一些事件觸發的某些程序執行，有時這些事件會連續觸發，如瀏覽器窗口 scroll、resize，輸入框的 keyup、input，以及 click 事件在連續點擊時連續發送請求等等，這些情況有些會嚴重影響前端性能，有些會增加服務器壓力，使用戶體驗大打折扣，而函數節流和防抖就是為了解決這樣的問題。

函數節流 throtter

函數節流：當持續發生事件時，保證在一個固定的時間間隔只執行一次真正的事件處理程序，通俗的說就像 “節流” 的名字一樣，打開水龍頭時要秉承勤儉節約的原則，把閥門關小，最好是達到在固定間隔內水一滴一滴的往下流。

1、節流函數的時序圖

從圖中可以看出，連續觸發事件時，真正執行事件處理程序的間隔是固定的，多次觸發，也只會在某一個時間間隔內觸發一次，由于事件處理函數內部執行邏輯各不相同，我們就封裝一版可通用的節流函數。

2、節流函數的封裝

// 文件：throtter.js
// 節流函數
const throtter = (func, delay = 60) => {
    // 鎖的標識
    let lock = false;

    // 返回一個事件處理函數
    return (...args) => {
        // 如果 lock 為 true 則跳出
        if (lock) return;

        // 執行函數并更改鎖的狀態
        func(...args);
        lock = true;

        // 添加定時器，在到達時間間隔時重置鎖的狀態
        setTimeout(() => lock = false, delay);
    }
}

throtter 函數有兩個參數，第一個參數為在事件觸發時真正要執行的函數，第二個參數為定義的間隔時間，在函數執行時定義了 lock 的初始值，通過閉包返回一個函數作為事件處理函數，在返回的函數內部判斷 lock 狀態并確定執行真正的函數 func 還是跳出，每次執行 func 后會更改 lock 狀態，通過定時器在規定的時間間隔內重置 lock，這就是函數節流的原理。

3、驗證節流函數

// 文件：throtter-test.js
// 使用節流函數
document.addEventListener("scroll", throtter(console.log));

上面我們給 document 對象添加了滾動事件，并不斷的打印事件對象，事件處理函數的默認參數為事件對象，從執行效果應該可以看出，平均每 60ms 才會觸發一次事件，達到了優化性能的目的，如果想讓真正執行的函數 func 傳入更多的參數，只需如下處理。

// 文件：throtter-test.js
// a b 為函數要傳入的參數
let a = 1, b = 2;

// 返回事件處理函數
const func = throtter(console.log);

// 添加事件監聽
document.addEventListener("scroll", e => func(e, a, b));

節流函數一般用于 scroll、resize 事件的情況較多，因為這些事件的觸發是連續性的，需要在一個時間間隔內只觸發一次。

函數防抖 debounce

函數防抖：當持續發生事件時，事件只在上一次觸發后的一段時間內沒再觸發事件，才會真正的執行事件處理邏輯，如果每兩次觸發的間隔小于這個時間，則不執行事件邏輯。

1、防抖函數的時序圖

從圖中可以看出，連續觸發事件時并沒有執行事件處理函數，只有在某一階段連續觸發后的最后一次才執行，也就是上一次觸發的時間間隔要大于設定值才執行，同樣的，事件處理函數內部執行邏輯各不相同，我們就封裝一版可通用的防抖函數。

2、防抖函數的封裝

// 文件：debounce.js
// 防抖函數
const dobounce = (func, delay = 300, timer = null) => {
    return (...args) => {
        // 清除定時器
        clearInterval(timer);

        // 在定時器到時后執行事件處理函數
        timer = setTimeout(() => func(...args), delay);
    }
}

dobounce 函數有三個參數，第一個參數為在事件觸發時真正要執行的函數，第二個參數為執行事件的延遲時間，第三個參數為定時器 ID 的初始值，執行 dobounce 通過閉包返回了事件處理函數，在處理函數內部先清除定時器，然后定義定時器并將 ID 賦值給 timer，如果事件連續觸發，則會不斷的清除定時器，直到有一次觸發間隔超過了設定延時時間 delay，才會真正執行 func。

3、驗證防抖函數





    
    函數防抖

// 文件：debounce-test.js
// 使用防抖函數
let ipt = document.querySelector("#ipt");

// 添加事件監聽
ipt.addEventListener("keyup", debounce(console.log));

上面的功能跟 throtter 類似，真正執行事件處理函數時打印事件對象，通過驗證，連續輸入觸發 keyup 事件，上一次觸發和下一次觸發間隔時間必須大于 300ms 才會執行打印事件對象的邏輯，如果想傳入多個參數套路相同。

// 文件：debounce-test.js
// 獲取 dom 元素
let ipt = document.querySelector("#ipt");

// a b 為函數要傳入的參數
let a = 1, b = 2;

// 返回事件處理函數
const func = debounce(console.log);

// 添加事件監聽
ipt.addEventListener("keyup", e => func(e, a, b));

防抖函數一般用于輸入框事件，常用場景就是搜索或查詢，如果不使用防抖會連續發送請求，增加服務器的壓力，使用防抖后，會在用戶輸入要查詢的關鍵詞后才發送請求，這也更符合用戶的習慣，例如百度搜索，就是這樣實現的。

總結

“節流” 和 “防抖” 是前端在項目中經常使用的優化手段，代碼雖然不多，但是確是前端面試 “出鏡率” 非常高的知識點，從而能看出它們的重要性，所以建議前端同學們一定要知道，并能手寫，這是 “一箭雙雕” 的事，可以用來通過面試，也可以因為工作中遇到直接就寫而提高工作效率。

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

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

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

JS之節流和防抖

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

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

摘要：當第二次調用該函數時，它會清除前一次的定時器并設置另一個。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。參考文章函數節流與函數防抖函數節流和函數去抖應用場景辨析函數節流函數防抖實現原理分析前言事件的觸發權很多時候都屬于用戶，有些情況下會產生問題：向后臺發送數據，用戶頻繁觸發，對服務器造成壓力一些瀏覽器事件:window.onresi...

didikee 2019-08-23 13:50 評論0 收藏0
函數節流和防抖

摘要：當第二次調用該函數時，它會清除前一次的定時器并設置另一個。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。參考文章函數節流與函數防抖函數節流和函數去抖應用場景辨析函數節流函數防抖實現原理分析前言事件的觸發權很多時候都屬于用戶，有些情況下會產生問題：向后臺發送數據，用戶頻繁觸發，對服務器造成壓力一些瀏覽器事件:window.onresi...

huaixiaoz 2019-08-02 12:09 評論0 收藏0
函數節流和防抖

摘要：當第二次調用該函數時，它會清除前一次的定時器并設置另一個。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。參考文章函數節流與函數防抖函數節流和函數去抖應用場景辨析函數節流函數防抖實現原理分析前言事件的觸發權很多時候都屬于用戶，有些情況下會產生問題：向后臺發送數據，用戶頻繁觸發，對服務器造成壓力一些瀏覽器事件:window.onresi...

CHENGKANG 2019-08-29 17:28 評論0 收藏0
關于js節流函數throttle和防抖動debounce

摘要：主要實現在于通過異步操作的事件間隔，對于前后兩次調用方法打時間進行比較，用清空定時器的操作實現多余調用操作的舍棄。廢話不多說，直奔主題。什么是throttle和debounce？這兩個方法的主要目的多是用于性能優化。最常見的應用嘗盡就是在通過監聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發多...

張紅新 2019-08-22 16:45 評論0 收藏0