国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

javascript事件節(jié)流和防抖

Benedict Evans / 2230人閱讀

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

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

事件節(jié)流

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

問題：

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

解決辦法：

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

//問題解決的原理就是事件節(jié)流

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

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

解決這個問題我們需要減少執(zhí)行次數(shù)。

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

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

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

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

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

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

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

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

測試完美！

事件防抖

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

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

            let oInput = document.querySelector("input")
                // oInput.addEventListener("input", function(e) {
                //     //如果直接每次onInput發(fā)請求，會導致性能問題
                //     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)
                        // 重新打開定時器，做到只有最后一次執(zhí)行了
                    timer = setTimeout(() => {
                        // 綁定this，傳入?yún)?shù)給callback。通常我們需要事件對象就ok
                        fn.apply(this, arg)
                    }, delay)
                }
            }

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

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

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

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

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

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

相關文章

  • 函數(shù)節(jié)流和防抖

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

    didikee 評論0 收藏0

  • 函數(shù)節(jié)流和防抖

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

    huaixiaoz 評論0 收藏0

  • 函數(shù)節(jié)流和防抖

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

    CHENGKANG 評論0 收藏0

  • JS之節(jié)流和防抖

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

    fevin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<