成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

JavaScript之節(jié)流與防抖

wayneli / 636人閱讀

摘要：個(gè)人博客原文地址背景我們?cè)陂_(kāi)發(fā)的過(guò)程中會(huì)經(jīng)常使用如等事件，如果正常綁定事件處理函數(shù)的話，有可能在很短的時(shí)間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。

個(gè)人博客原文地址

背景

我們?cè)陂_(kāi)發(fā)的過(guò)程中會(huì)經(jīng)常使用如scroll、resize、touchmove等事件，如果正常綁定事件處理函數(shù)的話，有可能在很短的時(shí)間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。
因此針對(duì)這類(lèi)事件要進(jìn)行節(jié)流或者防抖處理

節(jié)流

節(jié)流的意思是，在規(guī)定的時(shí)間內(nèi)只會(huì)觸發(fā)一次函數(shù)，如我們?cè)O(shè)置函數(shù)500ms觸發(fā)一次，之后你無(wú)論你觸發(fā)了多少次函數(shù)，在這個(gè)時(shí)間內(nèi)也只會(huì)有一次執(zhí)行效果

先來(lái)看一個(gè)例子

https://codepen.io/wclimb/pen...

我們看到使用了節(jié)流的在1000ms內(nèi)只觸發(fā)了一次，而沒(méi)有使用節(jié)流的則頻繁觸發(fā)了調(diào)用的函數(shù)

接下來(lái)看看代碼實(shí)現(xiàn)
v1 第一次不觸發(fā)，不傳參實(shí)現(xiàn)

function throttle(fn,interval){
    var timer;
    return function(){
        if(timer){
            return
        }
        timer = setTimeout(() => {
            clearTimeout(timer)
            timer = null
            fn()
        }, interval || 1000);
    }   
}

效果是實(shí)現(xiàn)了，但是我在嘗試在執(zhí)行函數(shù)里console.log(this)，結(jié)果發(fā)現(xiàn)this指向的是window，而且還發(fā)現(xiàn)我們不能傳遞參數(shù)，下面就來(lái)改進(jìn)一下

v2 第一次觸發(fā)函數(shù)，接收參數(shù)

function throttle(fn,interval){
    var timer,
        isFirst = true;
    return function(){
        var args = arguments,
            that = this;
        if(isFirst){
            fn.apply(that,args)
            return isFirst = false
        }
        if(timer){
            return
        }
        timer = setTimeout(() => {
            clearTimeout(timer)
            timer = null
            fn.apply(that,args)
        }, interval || 1000);
    }   
}
防抖

防抖的意思是無(wú)論你觸發(fā)多少次函數(shù)，只會(huì)觸發(fā)最后一次函數(shù)。最常用的就是在表單提交的時(shí)候，用戶(hù)可能會(huì)一段時(shí)間內(nèi)點(diǎn)擊很多次，這個(gè)時(shí)候可以增加防抖處理，我們只需要最后一次觸發(fā)的事件

先來(lái)看一個(gè)例子

https://codepen.io/wclimb/pen...

我們看到使用了防抖的方框，無(wú)論你在里面觸發(fā)了多少次函數(shù)，都只會(huì)觸發(fā)最后的那一次函數(shù)，而沒(méi)有使用防抖的則頻繁觸發(fā)了調(diào)用的函數(shù)

v1 第一次不觸發(fā)函數(shù)

function debounce(fn,interval){
    var timer;
    return function(){
        var args = arguments,
            that = this;
        if(timer){
            clearTimeout(timer)
            timer = null
        }
        timer = setTimeout(() => {
            fn.apply(null,args)
        }, interval || 1000);
    }
}

上面這段代碼仍然可以正常執(zhí)行，但是我們并沒(méi)有指定他的this

v2 第一次就觸發(fā)函數(shù)

function debounce(fn,interval){
    var timer,
        isFirst  = true,
            can = false;
    return function(){
        var args = arguments,
            that = this;
        if(timer){
            clearTimeout(timer)
            timer = null
        }
        if(isFirst){
            fn.apply(that,args)
            isFirst = false
            setTimeout(() => {
                can = true
            }, interval || 1000);
        }else if(can){
            timer = setTimeout(() => {
                fn.apply(null,args)
            }, interval || 1000);
        }
    }
}

如有雷同，純屬抄我（開(kāi)玩笑）

如有錯(cuò)誤，還望指正，僅供參考

GitHub：wclimb

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/96456.html

相關(guān)文章

  • 理解節(jié)流與防抖

    摘要：節(jié)流節(jié)流限制了一個(gè)函數(shù)可以在短時(shí)間內(nèi)被調(diào)用的次數(shù)。更新防抖防抖確保了一個(gè)函數(shù)只有在一個(gè)固定時(shí)間段內(nèi)沒(méi)有被調(diào)用過(guò)后，才會(huì)再次被調(diào)用。再換句話說(shuō)防抖會(huì)等待事件不再高頻發(fā)生，再觸發(fā)。這個(gè)網(wǎng)站很好的可視化了節(jié)流與防抖。 節(jié)流 Throttling 節(jié)流限制了一個(gè)函數(shù)可以在短時(shí)間內(nèi)被調(diào)用的次數(shù)。可以這樣形容：在一毫秒內(nèi)最多執(zhí)行此函數(shù) 1 次。 Throttling enforces a maxi...

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

  • The debounce & throttle in Javascript（防抖與節(jié)流）

    摘要：您的支持是我最大的動(dòng)力，我會(huì)保證提供高質(zhì)與清晰的文章與您共同成長(zhǎng)。一些文章中的與上面所談到的設(shè)置類(lèi)似。防抖防抖技術(shù)允許我們捆綁多個(gè)連續(xù)調(diào)用成為單一的一次調(diào)用。防抖的應(yīng)用這個(gè)簡(jiǎn)單的舉個(gè) 歡迎star和watch我的github issue blog，歡迎加入討論。您的支持是我最大的動(dòng)力，我會(huì)保證提供高質(zhì)與清晰的文章與您共同成長(zhǎng)。 節(jié)流[throttle]與防抖[debounce]在前...

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

  • 淺談節(jié)流與防抖

    摘要：節(jié)流和防抖在開(kāi)發(fā)項(xiàng)目過(guò)程中很常見(jiàn)，例如輸入實(shí)時(shí)搜索滾動(dòng)更新了，等等，大量的場(chǎng)景需要我們對(duì)其進(jìn)行處理。防抖多次觸發(fā)，只在最后一次觸發(fā)時(shí)，執(zhí)行目標(biāo)函數(shù)。節(jié)流限制目標(biāo)函數(shù)調(diào)用的頻率，比如內(nèi)不能調(diào)用次。 節(jié)流和防抖在開(kāi)發(fā)項(xiàng)目過(guò)程中很常見(jiàn)，例如 input 輸入實(shí)時(shí)搜索、scrollview 滾動(dòng)更新了，等等，大量的場(chǎng)景需要我們對(duì)其進(jìn)行處理。我們由 Lodash 來(lái)介紹，直接進(jìn)入主題吧。 Lod...

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

  • 從lodash源碼學(xué)習(xí)節(jié)流與防抖

    摘要：首先重置防抖函數(shù)最后調(diào)用時(shí)間，然后去觸發(fā)一個(gè)定時(shí)器，保證后接下來(lái)的執(zhí)行。這就避免了手動(dòng)管理定時(shí)器。 ??之前遇到過(guò)一個(gè)場(chǎng)景，頁(yè)面上有幾個(gè)d3.js繪制的圖形。如果調(diào)整瀏覽器可視區(qū)大小，會(huì)引發(fā)圖形重繪。當(dāng)圖中的節(jié)點(diǎn)比較多的時(shí)候，頁(yè)面會(huì)顯得異?？D。為了限制類(lèi)似于這種短時(shí)間內(nèi)高頻率觸發(fā)的情況，我們可以使用防抖函數(shù)。 ??實(shí)際開(kāi)發(fā)過(guò)程中，這樣的情況其實(shí)很多，比如： 頁(yè)面的scroll事件 ...

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

  • 節(jié)流 - 理解，實(shí)踐與實(shí)現(xiàn)

    摘要：節(jié)流分流，與防抖去抖實(shí)現(xiàn)原理相似。本文主要討論節(jié)流，鏡像文章防抖理解，實(shí)踐與實(shí)現(xiàn)。分開(kāi)討論防抖和節(jié)流，主要是為了讓一些還不太了解節(jié)流防抖的讀者能夠有針對(duì)性地，逐一掌握它們。上方為未節(jié)流模式，每一次觸發(fā)都會(huì)繪制一個(gè)圓點(diǎn)。 showImg(https://segmentfault.com/img/bVbqMwN?w=1280&h=720); 節(jié)流(分流)，與防抖（去抖）實(shí)現(xiàn)原理相似。本文主...

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

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

0條評(píng)論

閱讀需要支付1元查看
<