JS防抖節流函數的實現與使用方式

本篇內容介紹了“JS防抖節流函數的實現與使用方式”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

目錄

• 一、什么是函數防抖
  

• 1、為什么需要函數防抖？
  

• 2、函數防抖的要點

• 3、函數防抖的實現
  

• 4、函數防抖的使用場景
  

• 二、什么是函數節流
  

• 1、函數節流的要點
  

• 2、函數節流的實現

• 3、函數節流的使用場景
  

  
  

一、什么是函數防抖

概念：函數防抖（debounce），就是指觸發事件后，在 n 秒內函數只能執行一次，如果觸發事件后在 n 秒內又觸發了事件，則會重新計算函數延執行時間。

1、為什么需要函數防抖？

前端開發過程中，有一些事件，常見的例如，onresize，scroll，mousemove ,mousehover 等，會被頻繁觸發（短時間內多次觸發），不做限制的話，有可能一秒之內執行幾十次、幾百次，如果在這些函數內部執行了其他函數，尤其是執行了操作 DOM 的函數（瀏覽器操作 DOM 是很耗費性能的），那不僅會浪費計算機資源，還會降低程序運行速度，甚至造成瀏覽器卡死、崩潰。

2、函數防抖的要點

函數防抖的要點，是需要一個 setTimeout 來輔助實現，延遲運行需要執行的代碼。如果方法多次觸發，則把上次記錄的延遲執行代碼用 clearTimeout 清掉，重新開始計時。若計時期間事件沒有被重新觸發，等延遲時間計時完畢，則執行目標代碼。

3、函數防抖的實現

//HTML部分
 <div>
    賬戶：<input type="text" id="myinput">
</div>

//JS部分
function debounce(fun,wait=1500){//ES6語法 wait=1500 設置參數默認值，如果沒有輸入wait就會使用1500
        let timeout = null
        return function(){
            if(timeout){//如果存在定時器就清空
                clearTimeout(timeout)
            }
            timeout=setTimeout(function(){
                fun()
            },wait)
        }

    }
function testUname(){
    console.log("輸入結束！")
}
document.getElementById('myinput').addEventListener('input',debounce(testUname,1000))

上面的代碼就是防抖函數的簡單運用，只要你每次輸入間隔大于一秒，那么永遠不會打“印輸入結束！”，直到你停止輸入嗎，這是因為每一次的輸入都會清除上一次的計時器。

看到這里你以為就結束了嗎？別急，讓我們繼續看：

//HTML部分
 <div>
    賬戶：<input type="text" id="myinput">
</div>

//JS部分
function debounce(fun,wait=1500){
        let timeout = null
        return function(){
            console.log(this)//<input id="myinput" type="text">
            console.log(arguments)//Arguments { 0: input, … }
            if(timeout){//如果存在定時器就清空
                clearTimeout(timeout)
            }
            timeout=setTimeout(function(){
                console.log(this)//Window
                console.log(arguments)//Arguments { … }
                fun()
            },wait)
        }

    }
function testUname(){
    console.log("輸入結束！")
}
document.getElementById('myinput').addEventListener('input',debounce(testUname,1000))

無論是防抖還是節流，我們都要解決兩個問題，this指向和arguments。

如果沒有特殊指向，setInterval和setTimeout的回調函數中this的指向都是window。這是因為JS的定時器方法是定義在window下的。這顯然不是我們希望的，因為我們監聽的是input輸入框，所以我們希望定時器里面的this指向input。

那么有什么方法可以改變this指向嗎？

一種簡單的辦法就是我們可以用參數把定時器外層函數的this和arguments保存下來。然后再通過apply改變定時器要執行的函數fun的指向。

//JS部分
function debounce(fun,wait=1500){
            let timeout = null
            return function(){
                let _this = this
                let arg = arguments
                if(timeout){//如果存在定時器就清空
                    clearTimeout(timeout)
                }
                timeout=setTimeout(function(){
                    console.log(_this)//<input id="myinput" type="text">
                    console.log(arg)//Arguments { 0: input, … }
                    fun.apply(_this,arg)
                },wait)
            }
         
        }

當然，你也可以用ES6的箭頭函數新特性：箭頭函數的 this 始終指向函數定義時的 this，而非執行時。箭頭函數需要記著這句話：“箭頭函數中沒有 this 綁定，必須通過查找作用域鏈來決定其值，如果箭頭函數被非箭頭函數包含，則 this 綁定的是最近一層非箭頭函數的 this，否則，this 為 undefined”。

所以也可以這樣寫：

//JS部分
function debounce(fun,wait=1500){
            let timeout = null
            return function(){
                if(timeout){//如果存在定時器就清空
                    clearTimeout(timeout)
                }
                timeout=setTimeout(()=>{
                    console.log(this)//<input id="myinput" type="text">
                    console.log(arguments)//Arguments { 0: input, … }
                    fun.apply(this,arguments)
                },wait)
            }
         
        }

4、函數防抖的使用場景

函數防抖一般用在什么情況之下呢？一般用在，連續的事件只需觸發一次回調的場合。具體有：

• 搜索框搜索輸入。只需用戶最后一次輸入完，再發送請求；

• 用戶名、手機號、郵箱輸入驗證；

• 瀏覽器窗口大小改變后，只需窗口調整完后，再執行 resize 事件中的代碼，防止重復渲染。

二、什么是函數節流

概念： 限制一個函數在一定時間內只能執行一次。

舉個栗子，坐火車或地鐵，過安檢的時候，在一定時間（例如10秒）內，只允許一個乘客通過安檢入口，以配合安檢人員完成安檢工作。上例中，每10秒內，僅允許一位乘客通過，分析可知，“函數節流”的要點在于，在 一定時間 之內，限制 一個動作 只 執行一次 。

1、函數節流的要點

主要實現思路就是通過 setTimeout 定時器，通過設置延時時間，在第一次調用時，創建定時器，先設定一個變量，然后把定時器賦值給這個變量，再寫入需要執行的函數。第二次執行這個函數時，會判斷變量是否true，是則返回。當第一次的定時器執行完函數最后會設定變量為false。那么下次判斷變量時則為false，函數會依次運行。目的在于在一定的時間內，保證多次函數的請求只執行最后一次調用。
這么看是不是有點看不懂？讓我們來看代碼：

2、函數節流的實現

//JS部分
function debounce(fun,wait=1000){//定時器方案
            let timer = null;//先設定一個變量
            return function(){
                if(!timer){//如果timer為null就進入
                    timer = setTimeout(function(){//然后把定時器賦值給這個變量
                        fun()//再寫入需要執行的函數
                        timer = null//第一次的定時器執行完函數最后會設定變量為false，這里的 timer = null有兩個作用，1、開啟下一次的入口，2、清除后面的定時器
                    })

                }
            }
        }
function testUname(){
    console.log(Math.random())
}
document.getElementById('myinput').addEventListener('input',debounce(testUname))

同樣的，節流函數也要解決this和arguments的問題，改進后如下：

//箭頭函數寫法
function debounce(fun,wait=1000){
            let timer = null
            return function(){
                if(!timer){
                    timer = setTimeout(()=>{
                        fun.apply(this,arguments)
                        timer = null
                    },wait)

                }
            }
}
//參數保存法
function debounce(fun,wait=1000){
        let timer = null
        return function(){
            let _this = this
            let arg = arguments
            if(!timer){
                timer = setTimeout(function(){
                    fun.apply(_this,arg)
                    timer = null
                },wait)

            }
        }
}

3、函數節流的使用場景

到此為止，相信各位應該對函數節流有了一個比較詳細的了解，那函數節流一般用在什么情況之下呢？

• 懶加載、滾動加載、加載更多或監聽滾動條位置；

• 百度搜索框，搜索聯想功能；

• 防止高頻點擊提交，防止表單重復提交；

“JS防抖節流函數的實現與使用方式”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！