JS函數防抖和函數節流的示例分析

這篇文章主要介紹JS函數防抖和函數節流的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

概述

函數防抖和函數節流都是定義一個函數，該函數接收一個函數作為參數，并返回一個添加了防抖或節流功能后的函數。

因此可以將函數防抖和函數節流看作是一個函數工廠，負責對傳進來的函數進行相應的加工改造，然后產出一個新的帶有某種功能的函數。

函數防抖是某一時間內只執行一次，而函數節流是間隔時間執行

假如有這樣一個場景：在某一頁面，有一個按鈕是 "加載更多"，這個按鈕的作用就是使用 ajax 從后端服務器請求更多的數據展示在頁面，我們都知道，ajax 請求的響應是一個異步的，會存在一定的響應時間，如果用戶在點擊了該按鈕后，立馬又點擊了一下該按鈕，按照常規回調函數的操作，回調函數會立馬又執行一次，那么就是用戶短時間內點擊了兩次 "加載更多" 按鈕后就會執行回調函數向后端發起了兩次一模一樣的 ajax 請求，服務器會一一接收請求并處理返回數據，短時間內兩次請求還好，如果用戶連續點擊了 n 次 "加載更多" 按鈕呢？那就會短時間內向服務器發送了 n 次一模一樣的請求，每次后端處理 ajax 請求后返回數據后頁面就會重新再渲染一次，盡管內容沒有改變，這樣就會帶來性能上的問題，不僅為服務器帶去了壓力，也為瀏覽器帶來了不必要的渲染，這就是函數頻繁執行帶來的副作用。

那么如何設置這個按鈕的點擊事件回調函數才能減少該函數頻繁執行帶來的副作用呢？

1. 函數防抖（debounce）

函數防抖的設計思路就是在函數執行前加一個等待時間，在這個等待時間內如果該函數又需要執行一次，就重新計算等待時間，再次等待，依次類推，直到等待時間到了，還沒有等到函數又需要執行的情況，才會執行這個函數。

就拿上述的場景來說，假設向后臺發送 ajax 請求的響應時間大概是在 2s 左右，那就設置這個等待時間為 2s，當用戶第一次點擊"加載更多"按鈕后，該回調函數并沒有立即執行，也就是還沒有開始發送 ajax，此時該函數在等待，如果在 2s 內用戶又點擊了"加載更多"，那就重新計算等待時間，再等待 2s ，此時 2s 過去了，用戶沒再第三次點擊"加載更多"按鈕了，那么該函數就開始執行了，向后端發送 ajax 請求了。

函數防抖實現方式如下：

function debounce(fn, delay){
    let timeId = null
    return function(){
        let context = this
        if(timeId){window.clearTimeout(timeId)}
        timeId = setTimeout(()=>{
            fn.apply(context, arguments)
            timeId = null
        },delay)
    }
}

2. 函數節流（throttle）

函數節流的設計思路是在函數執行后加一個冷卻時間，函數在第一次執行時是立馬執行，但在其執行完后設置一個冷卻時間，在冷卻時間內，該函數不能再次執行，直到冷卻時間結束允許該函數執行了，才可以再次執行。

就拿上述的場景來說，冷卻時間假設也設置為 2s，在用戶第一次點擊"加載更多" 后按鈕的回調函數就會執行，也就是會向后臺發送 ajax 請求，此時用戶又立馬再次點擊了"加載更多"按鈕，由于此刻 2s 的冷卻時間還沒有到，那么就會給第二次的函數執行加上一個延遲執行。

function throttle(fn, delay){
    let canUse = true
    return function(){
        if(canUse){
            fn.apply(this, arguments)
            canUse = false
            setTimeout(()=>canUse=true, delay)
        }
    }
}

JavaScript有什么特點

1、js屬于一種解釋性腳本語言；2、在絕大多數瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數據類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現信息瀏覽或動態交互，從而有效地防止數據的丟失；5、基于對象的腳本語言，js不僅可以創建對象，也能使用現有的對象。

以上是“JS函數防抖和函數節流的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！