Javascript 事件節流和防抖

事件節流和防抖是爲了解決開發過程當中遇到性能問題，常見於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點贊是個人動力！