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

資訊專欄INFORMATION COLUMN

debouncing 與 throttling

zzir / 2162人閱讀

摘要：一個(gè)使用場(chǎng)景某些瀏覽器事件可能會(huì)在短時(shí)間內(nèi)高頻觸發(fā)，比如整窗口大小或滾動(dòng)頁(yè)面。這會(huì)導(dǎo)致非常嚴(yán)重的性能問(wèn)題。實(shí)現(xiàn)與類似，接收兩個(gè)參數(shù)，一個(gè)是需要截流的函數(shù)，另一個(gè)是函數(shù)執(zhí)行間隔閾值。

一個(gè)使用場(chǎng)景：
某些瀏覽器事件可能會(huì)在短時(shí)間內(nèi)高頻觸發(fā)，比如：整窗口大小或滾動(dòng)頁(yè)面。
如果給窗口滾動(dòng)事件添加一個(gè)事件監(jiān)聽器，然后用戶不停地快速滾動(dòng)頁(yè)面，那你的事件可能在短短數(shù)秒之內(nèi)被觸發(fā)數(shù)千次。這會(huì)導(dǎo)致非常嚴(yán)重的性能問(wèn)題。
所以如果功能涉及滾動(dòng)事件，窗口調(diào)整事件，或者鍵盤事件鼠標(biāo)事件等，你可能需要警覺(jué)起來(lái)，是否有必要使用 debouncing 或者 throttling 來(lái)提高頁(yè)面速度與性能。

Debouncing（防抖動(dòng)） 概念

debouncing（防抖動(dòng)）是解決上述問(wèn)題的一個(gè)方案，它的做法是 限制下次函數(shù)調(diào)用之前必須等待的時(shí)間間隔，也就是說(shuō)：強(qiáng)制一個(gè)函數(shù)在某個(gè)連續(xù)時(shí)間段內(nèi)只執(zhí)行一次，哪怕它本來(lái)會(huì)被調(diào)用多次。正確實(shí)現(xiàn) debouncing 的方法是：將若干個(gè)函數(shù)調(diào)用合并為一次，只有在空閑時(shí)間大于或等于給定值的時(shí)候，才執(zhí)行調(diào)用方法。

實(shí)現(xiàn)

簡(jiǎn)單的實(shí)現(xiàn)一個(gè) debounce 方法，接收兩個(gè)參數(shù)，一個(gè)是需要防抖動(dòng)的函數(shù) fn,另一個(gè)是延遲時(shí)間delay

funciton debouncing(fn, delay) {
    let timer; //定時(shí)器
    return function() { 
        // 保存函數(shù)調(diào)用時(shí)的上下文和參數(shù)，傳遞給 fn
        const context = this;
        const args = arguments;
        
        clearTimeout(timer);
        
        timer = setTimeout(function(){
            fn.apply(context, args);
        }, delay);
    }
}

該 debounce 的使用方法如下：

$(document).on("keyup", debounce(function(e) {
    // 代碼
}, 250))
Throttling（節(jié)流閥） 概念

throttling（節(jié)流閥）則是另一種解決問(wèn)題的方案，它的做法是固定一段時(shí)間內(nèi)函數(shù)調(diào)用的頻率，它與 debouncing 最大的不同之處在于，throttling 會(huì)保證至少調(diào)用一次。

實(shí)現(xiàn)

與 debounce 類似，接收兩個(gè)參數(shù)，一個(gè)是需要截流的函數(shù) fn， 另一個(gè)是函數(shù)執(zhí)行間隔閾值 threshhold。

function throttle(fn, threshhold) {
    let timer; //定時(shí)器
    let last; //記錄上次時(shí)間
    threshhold || (threshhold = 250); //默認(rèn)間隔為250ms    
    return function() {
        // 保存函數(shù)調(diào)用時(shí)的上下文和參數(shù)，傳遞給 fn
        var context = this;
        var args = arguments;
        
        let now = +new Date();
        
        // 如果上次調(diào)用距本次調(diào)用的時(shí)間間隔不夠，則不執(zhí)行 fn，并重新計(jì)時(shí)
        if(last && now < last + threshhold){
            clearTimeout(timer);
            
            // 保證在當(dāng)前時(shí)間區(qū)間結(jié)束后，再執(zhí)行一次 fn
            timer = setTimeout({
                last = now;
                fn.apply(context, args);
            }, threshhold);                
        } else {  //如果時(shí)間間隔夠了，則立刻執(zhí)行 fn
            last = now;
            fn.apply(context, args);
        }   
}

throttle使用方法如下：

$(document).on("mouvemove", throttle(function(e) {
    // 代碼
}, 250))
總結(jié)

debouncing 和 throttling 的區(qū)別還是很明顯的：前者把一段時(shí)間的多次調(diào)用合并成一次，后者把一段時(shí)間的多次調(diào)用減少為數(shù)次。下圖的展示十分便于理解。

相關(guān)文章：
實(shí)例解析防抖動(dòng)（Debouncing）和節(jié)流閥（Throttling)

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

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

相關(guān)文章

  • throttle函數(shù)與debounce函數(shù)

    摘要：當(dāng)函數(shù)被再次觸發(fā)時(shí)，清除已設(shè)置的定時(shí)器，重新設(shè)置定時(shí)器。函數(shù)設(shè)置定時(shí)器，并根據(jù)傳參配置決定是否在等待開始時(shí)執(zhí)行函數(shù)。函數(shù)取消定時(shí)器，并重置內(nèi)部參數(shù)。 throttle函數(shù)與debounce函數(shù) 有時(shí)候，我們會(huì)對(duì)一些觸發(fā)頻率較高的事件進(jìn)行監(jiān)聽，如果在回調(diào)里執(zhí)行高性能消耗的操作，反復(fù)觸發(fā)時(shí)會(huì)使得性能消耗提高，瀏覽器卡頓，用戶使用體驗(yàn)差。或者我們需要對(duì)觸發(fā)的事件延遲執(zhí)行回調(diào)，此時(shí)可以借助th...

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

  • JS throttle與debounce的區(qū)別

    摘要：可以看下面的栗子這個(gè)圖中圖中每個(gè)小格大約，右邊有原生事件與節(jié)流去抖插件的與事件。即如果有連續(xù)不斷的觸發(fā)，每執(zhí)行一次，用在每隔一定間隔執(zhí)行回調(diào)的場(chǎng)景。執(zhí)行啦打印執(zhí)行啦打印執(zhí)行啦節(jié)流按照上面的說(shuō)明，節(jié)流就是連續(xù)多次內(nèi)的操作按照指定的間隔來(lái)執(zhí)行。 一般在項(xiàng)目中我們會(huì)對(duì)input、scroll、resize等事件進(jìn)行節(jié)流控制，防止事件過(guò)多觸發(fā)，減少資源消耗；在vue的官網(wǎng)的例子中就有關(guān)于lod...

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

  • 淺談throttle以及debounce的原理和實(shí)現(xiàn)

    摘要：淺談以及的原理和實(shí)現(xiàn)背景日常開發(fā)中我們經(jīng)常會(huì)遇到一些需要節(jié)流調(diào)用或者壓縮調(diào)用次數(shù)的情況例如之前我在完成一個(gè)需求的時(shí)候就遇到了因?yàn)楹蠖瞬l(fā)問(wèn)題導(dǎo)致收到多條信息從而導(dǎo)致函數(shù)被重復(fù)調(diào)用的情況當(dāng)時(shí)的做法是通過(guò)對(duì)函數(shù)的調(diào)用進(jìn)行注冊(cè)遇到多次調(diào)用的時(shí)候清 淺談throttle以及debounce的原理和實(shí)現(xiàn) 背景 日常開發(fā)中,我們經(jīng)常會(huì)遇到一些需要節(jié)流調(diào)用,或者壓縮調(diào)用次數(shù)的情況,例如之前我在完成...

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

  • throttle與debounce的區(qū)別

    摘要：自己嘗試一下年在的文章中第一次看到的實(shí)現(xiàn)方法。這三種實(shí)現(xiàn)方法內(nèi)部不同，但是接口幾乎一致。如你所見(jiàn)，我們使用了參數(shù)，因?yàn)槲覀冎粚?duì)用戶停止改變?yōu)g覽器大小時(shí)最后一次事件感興趣。 前幾天看到一篇文章，我的公眾號(hào)里也分享了《一次發(fā)現(xiàn)underscore源碼bug的經(jīng)歷以及對(duì)學(xué)術(shù)界拿來(lái)主義的思考》具體文章詳見(jiàn)，微信公眾號(hào)：showImg(https://segmentfault.com/img/b...

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

  • [譯]通過(guò)實(shí)例講解Debouncing和Throtting(防抖與節(jié)流)

    摘要：譯通過(guò)實(shí)例講解和防抖與節(jié)流源碼中推薦的文章，為了學(xué)習(xí)英語(yǔ)，翻譯了一下原文鏈接作者本文來(lái)自一位倫敦前端工程師的技術(shù)投稿。首次或立即你可能發(fā)現(xiàn)防抖事件在等待觸發(fā)事件執(zhí)行，直到事件都結(jié)束后它才執(zhí)行。 [譯]通過(guò)實(shí)例講解Debouncing和Throtting(防抖與節(jié)流) lodash源碼中推薦的文章，為了學(xué)習(xí)（英語(yǔ)），翻譯了一下~ 原文鏈接 作者：DAVID CORBACHO 本文來(lái)自一位...

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

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

0條評(píng)論

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