javascript事件節流和防抖

Benedict Evans 發布于2019-08-23 14:39 / 2235人閱讀

摘要：事件節流和防抖是為了解決開發過程中遇到性能問題，常見于，頻繁點擊等事件節流設置一個時間間隔，時間間隔內只允許執行一次，好像客運站大巴，到點才會走。問題解決的原理就是事件節流隨便晃幾下執行了多次這也就是卡頓的根源。

事件節流和防抖是為了解決開發過程中遇到性能問題，常見于onscroll、onresize，頻繁點擊button等

事件節流

設置一個時間間隔，時間間隔內只允許執行一次，好像客運站大巴，到點才會走。

問題：

多年前遇到過一個onresize問題，頁面滿屏布局，模塊很多dom結構也相對復雜。所以在窗口頻繁快速變化大小的時候頁面反應異常卡頓。

解決辦法：

說實話當初意識到是性能問題不過不知道怎么解決，搜索了很多相關問題，最后在https://stackoverflow.com找到...，遺憾的是具體的鏈接忘了。不過也是因為這個問題宋詞愛上了這個網站，問題答案很靠譜。

//問題解決的原理就是事件節流

window.onresize = () => {
      console.log("resize")
}

隨便晃幾下執行了150多次,這也就是卡頓的根源。

解決這個問題我們需要減少執行次數。

          let timer = null
          window.onresize = () => {
                console.log(timer)
                if (!timer) {
                    timer = setTimeout(() => {
                        callBack()
                        timer = null
                    }, 1000)
                }
            }

            function callBack() {
                console.log("resize")
            }

這樣不管我們一秒內晃動多少次callBack只執行一次，問題解決接下在封裝一下

//封裝前我們先思考一下，首先既然是封裝那么事件不一定都是onersize、間隔時間得有用戶設置、callBack得是用戶寫。

**其實我們只關心callBack，和執行間隔時間，恰好事件都有回調

            function callBack() {
                console.log("resize")
            }

            function throttle(callBack, time) {
                let timer = null
                //timer狀態要常駐內存，這里做了一個閉包
                return function() {
                    if (!timer) {
                        timer = setTimeout(() => {
                            callBack()
                            timer = null
                        }, time)
                    }
                }
            }

            window.addEventListener("resize", throttle(callBack, 1000), false)

測試完美！

事件防抖

常用于驗證碼防刷，按鈕頻繁點擊導致發起多次請求給服務端造成壓力，代碼策略是，事件結束一段時間內只執行一次時間段內再次觸發重新計時，防抖原理類似趴活的黑車，永遠喊得就差一位上車就走，等你上去他接著喊就差一位上車就走。。。擦有點亂看代碼吧

//需求就是input輸入內容停頓間隔1000ms后觸發callback

            let oInput = document.querySelector("input")
                // oInput.addEventListener("input", function(e) {
                //     //如果直接每次onInput發請求，會導致性能問題
                //     console.log(e, this)
                // })

            oInput.addEventListener("input", debounce(callback, 500))

            function debounce(fn, delay) {
                let timer = null
                    // 綁定上下文this
                let self = this
                return function() {
                    let arg = arguments
                        // 每次清楚定時器
                    clearTimeout(timer)
                        // 重新打開定時器，做到只有最后一次執行了
                    timer = setTimeout(() => {
                        // 綁定this，傳入參數給callback。通常我們需要事件對象就ok
                        fn.apply(this, arg)
                    }, delay)
                }
            }

            function callback(e) {
                console.log("觸發", e.target.value)
            }

            function callback(e) {
                console.log("觸發", e.target.value)
            }

輸入了很多內容最后觸發了一次callback，效果完美！

您的吐槽or點贊是我的動力！

GPU云服務器云服務器 VUE防抖與節流 javascript事件 javascript鍵盤事件 javascript焦點事件

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

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

函數節流和防抖

摘要：當第二次調用該函數時，它會清除前一次的定時器并設置另一個。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。參考文章函數節流與函數防抖函數節流和函數去抖應用場景辨析函數節流函數防抖實現原理分析前言事件的觸發權很多時候都屬于用戶，有些情況下會產生問題：向后臺發送數據，用戶頻繁觸發，對服務器造成壓力一些瀏覽器事件: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）。這是兩個類似又有些不同的優化方案。節流：在指定時間之內，讓函數只觸發一次。防...

fevin 2019-08-26 17:15 評論0 收藏0