成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Benedict Evans / 2236人閱讀

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

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

事件節(jié)流

設(shè)置一個(gè)時(shí)間間隔，時(shí)間間隔內(nèi)只允許執(zhí)行一次，好像客運(yùn)站大巴，到點(diǎn)才會(huì)走。

問(wèn)題：

多年前遇到過(guò)一個(gè)onresize問(wèn)題，頁(yè)面滿屏布局，模塊很多dom結(jié)構(gòu)也相對(duì)復(fù)雜。所以在窗口頻繁快速變化大小的時(shí)候頁(yè)面反應(yīng)異?？D。

解決辦法：

說(shuō)實(shí)話當(dāng)初意識(shí)到是性能問(wèn)題不過(guò)不知道怎么解決，搜索了很多相關(guān)問(wèn)題，最后在https://stackoverflow.com找到...，遺憾的是具體的鏈接忘了。不過(guò)也是因?yàn)檫@個(gè)問(wèn)題宋詞愛(ài)上了這個(gè)網(wǎng)站，問(wèn)題答案很靠譜。

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

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

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

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

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

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

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

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

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

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

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

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

測(cè)試完美！

事件防抖

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

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

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

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

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

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

您的吐槽or點(diǎn)贊是我的動(dòng)力！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100944.html

相關(guān)文章

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

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

    didikee 評(píng)論0 收藏0

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

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

    huaixiaoz 評(píng)論0 收藏0

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

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

    CHENGKANG 評(píng)論0 收藏0

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

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

    fevin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<