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

yuanzhanghu 發(fā)布于2019-08-20 15:16 / 3079人閱讀

摘要：函數(shù)節(jié)流保證如果電梯第一個(gè)人進(jìn)來后，秒后準(zhǔn)時(shí)運(yùn)送一次，這個(gè)時(shí)間從第一個(gè)人上電梯開始計(jì)時(shí)，不等待，如果沒有人，則不運(yùn)行實(shí)現(xiàn)函數(shù)防抖函數(shù)節(jié)流仔細(xì)想想，上面的防抖方式還是有一定的缺點(diǎn)。

概念

函數(shù)防抖（debounce）

當(dāng)調(diào)用動(dòng)作過n毫秒后，才會(huì)執(zhí)行該動(dòng)作，若在這n毫秒內(nèi)又調(diào)用此動(dòng)作則將重新計(jì)算執(zhí)行時(shí)間

函數(shù)節(jié)流（throttle）

預(yù)先設(shè)定一個(gè)執(zhí)行周期，當(dāng)調(diào)用動(dòng)作的時(shí)刻大于等于執(zhí)行周期則執(zhí)行該動(dòng)作，然后進(jìn)入下一個(gè)新周期

函數(shù)節(jié)流（throttle）與 函數(shù)防抖（debounce）都是為了限制函數(shù)的執(zhí)行頻次，以優(yōu)化函數(shù)觸發(fā)頻率過高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。

比如如下的情況：

window對(duì)象的resize、scroll事件
拖拽時(shí)的mousemove事件
文字輸入、自動(dòng)完成的keyup事件

區(qū)別

可以拿我們平時(shí)坐電梯為例來形象地表述二者的區(qū)別

函數(shù)防抖：如果有人進(jìn)電梯（觸發(fā)事件），那電梯將在10秒鐘后出發(fā)（執(zhí)行事件監(jiān)聽器），這時(shí)如果又有人進(jìn)電梯了（在10秒內(nèi)再次觸發(fā)該事件），我們又得等10秒再出發(fā)（重新計(jì)時(shí)）。函數(shù)節(jié)流 ：保證如果電梯第一個(gè)人進(jìn)來后，10秒后準(zhǔn)時(shí)運(yùn)送一次，這個(gè)時(shí)間從第一個(gè)人上電梯開始計(jì)時(shí)，不等待，如果沒有人，則不運(yùn)行

實(shí)現(xiàn) 函數(shù)防抖（debounce）

function _debounce(fn,wait){
    var timer = null;
    return function(){
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn()
        },wait)
    }
}

function _log(){
    console.log(1)
}
window.onscroll = _debounce(_log,500)

函數(shù)節(jié)流（throttle）

仔細(xì)想想，上面的防抖方式還是有一定的缺點(diǎn)。如果頁面很長，我們一直在滾動(dòng)頁面，那_log方法就一直不會(huì)被執(zhí)行。所以我們可以升級(jí)一下上述的防抖方法。

function _throttle(fn,wait,time){
    var previous = null; //記錄上一次運(yùn)行的時(shí)間
    var timer = null;

    return function(){
        var now = +new Date();

        if(!previous) previous = now;
        //當(dāng)上一次執(zhí)行的時(shí)間與當(dāng)前的時(shí)間差大于設(shè)置的執(zhí)行間隔時(shí)長的話，就主動(dòng)執(zhí)行一次
        if(now - previous > time){
            clearTimeout(timer);
            fn();
            previous = now;// 執(zhí)行函數(shù)后，馬上記錄當(dāng)前時(shí)間
        }else{
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn();
            },wait);
        }
    }
}
function _log(){
    console.log(1)
}
window.onscroll = _debounce(_log,500,2000)

其實(shí)，這就實(shí)現(xiàn)了我們的函數(shù)節(jié)流。趕快打開控制臺(tái)運(yùn)行一下吧~