節(jié)流

規(guī)定在一個(gè)單位時(shí)間內(nèi)，只能觸發(fā)一次函數(shù)。如果這個(gè)單位時(shí)間內(nèi)觸發(fā)多次函數(shù)，只有一次生效。

場景

• 滾動(dòng)加載，加載更多或滾到底部監(jiān)聽
• 百度谷歌搜索框，搜索聯(lián)想功能
• 高頻點(diǎn)擊提交，表單重復(fù)提交

function throttle(fn, delay) {
    let previous = 0;
    // 使用閉包返回一個(gè)函數(shù)并且用到閉包函數(shù)外面的變量previous
    return function() {
        let _this = this;
        let args = arguments;
        let now = new Date();
        if(now - previous > delay) {
            fn.apply(_this, args);
            previous = now;
        }
    }
}

防抖

在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。

場景

• 搜索框搜索輸入。只需用戶最后一次輸入完，再發(fā)送請(qǐng)求
• 手機(jī)號(hào)、郵箱驗(yàn)證輸入檢測
• 頁面resize事件，常見于需要做頁面適配的時(shí)候，因?yàn)橹恍枰袛嘧詈笠淮蔚淖兓闆r

function debounce(fn, delay) {
    let timer; // 維護(hù)一個(gè) timer
    return function () {
        let _this = this; // 取debounce執(zhí)行作用域的this
        let args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args); // apply指向調(diào)用debounce的對(duì)象，相當(dāng)于_this.fn(args);
        }, delay);
    };
}