防抖（debounce）和節(jié)流（throttle）的學(xué)習(xí)總結(jié)

caspar 發(fā)布于2019-08-23 15:58 / 1070人閱讀

摘要：節(jié)流原理為事件觸發(fā)時(shí)調(diào)用的函數(shù)添加時(shí)間閾值，只有在超過(guò)時(shí)間閾值時(shí)觸發(fā)事件，回調(diào)函數(shù)才會(huì)被調(diào)用。

防抖（debounce）

用戶與網(wǎng)頁(yè)進(jìn)行交互時(shí)，經(jīng)常出現(xiàn)根據(jù)頁(yè)面的狀態(tài)、數(shù)據(jù)向服務(wù)器請(qǐng)求、發(fā)送數(shù)據(jù)的場(chǎng)景，比如：根據(jù)用戶的輸入數(shù)據(jù)進(jìn)行實(shí)時(shí)校驗(yàn)，下拉請(qǐng)求數(shù)據(jù)等等，如果用戶操作過(guò)于頻繁，頁(yè)面狀態(tài)、數(shù)據(jù)變化的太快太頻繁，會(huì)進(jìn)行多次請(qǐng)求，這其中的很多請(qǐng)求都是沒(méi)有意義的，實(shí)時(shí)校驗(yàn)，只需要校驗(yàn)用戶最后的輸入，下拉請(qǐng)求只需要在用戶下拉的最后一次進(jìn)行請(qǐng)求。這就需要防抖來(lái)實(shí)現(xiàn)了。
防抖的原理：為事件觸發(fā)時(shí)調(diào)用的函數(shù)添加延遲，如果在延遲內(nèi)頻繁觸發(fā)，上一次的事件觸發(fā)會(huì)被取消，延遲將會(huì)重新計(jì)算，這樣一來(lái)用戶的最會(huì)一次觸發(fā)，函數(shù)才會(huì)真正被調(diào)用。

//fn為回調(diào)函數(shù)，delay是人為設(shè)置的延遲
function debounce(fn, delay){
    var timeout; //定時(shí)器編號(hào)
    return function(){
        //context是回調(diào)函數(shù)運(yùn)行的環(huán)境， 
        //args是回調(diào)函數(shù)的參數(shù)，一般是addEventListener傳進(jìn)來(lái)的event變量
        var context = this, args = arguments;
        clearTimeout(timeout);//當(dāng)用戶頻繁觸發(fā)事件時(shí)，定時(shí)器被清除
        timeout = setTimeout(function(){
            fn.apply(context, args);
        }, delay);
    }
}
//調(diào)用方式
var validate = debounce(function(){
    //do somthing
}, 200);
document.querySelector("input").addEventListener("input", validate);

節(jié)流（throttle）

節(jié)流，顧名思義就是把管道的閥門(mén)稍稍關(guān)緊一點(diǎn)，讓水流動(dòng)的少一點(diǎn)。在javascript中，很多事件是連續(xù)觸發(fā)的，比如：resize，mousemove。我們不希望事件頻繁觸發(fā)，如果采用防抖方案，事件只在延遲時(shí)間內(nèi)觸發(fā)最后一次，這顯然是不合理的，我們只需要讓其觸發(fā)的頻率低一些，這就需要節(jié)流來(lái)實(shí)現(xiàn)。
節(jié)流原理：為事件觸發(fā)時(shí)調(diào)用的函數(shù)添加時(shí)間閾值，只有在超過(guò)時(shí)間閾值時(shí)觸發(fā)事件，回調(diào)函數(shù)才會(huì)被調(diào)用。

//fn為回調(diào)函數(shù)，threshhold是時(shí)間閾值
function throttle(fn, threshhold){
    var start = new Date(), timeout;
    var threshhold = threshhold || 160;
    return function(){
        //context是回調(diào)函數(shù)運(yùn)行的環(huán)境， 
        //args是回調(diào)函數(shù)的參數(shù)，一般是addEventListener傳進(jìn)來(lái)的event變量
        var context = this, args = arguments, cur = new Date();
        clearTimeout(timeout);
        //通過(guò)連續(xù)兩次觸發(fā)的時(shí)間間隔，決定是否調(diào)用回調(diào)函數(shù)
        if(cur - start >= threshhold){
            fn.apply(context, args);
            start = cur;
        }else{
            //當(dāng)連續(xù)觸發(fā)行為結(jié)束時(shí)，還要進(jìn)行最后一次函數(shù)回調(diào)
            timeout = setTimeout(function(){
                fn.apply(context, args)
            }, threshhold);
        }
    }
}
//調(diào)用函數(shù)
var mousemove = throttle(function(e) {
 //do somthing
});

// 綁定監(jiān)聽(tīng)
document.querySelector("#panel").addEventListener("mousemove", mousemove);

以下是html頁(yè)面

最后，大家可以通過(guò)這個(gè)動(dòng)畫(huà)來(lái)理解，學(xué)習(xí)防抖和節(jié)流。