国产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元查看
<