小白圖解防抖動(dòng)與節(jié)流-Javascript篇

DevTTL 發(fā)布于2019-08-23 12:34 / 2174人閱讀

摘要：防抖動(dòng)與節(jié)流點(diǎn)擊查看源碼防抖動(dòng)默認(rèn)不立即觸發(fā)保存作用域保存參數(shù)初始化清空所有定時(shí)器如果是立即觸發(fā)為空時(shí)觸發(fā)操作時(shí)間后置空時(shí)間后觸發(fā)操作防抖動(dòng)立即觸發(fā)防抖動(dòng)節(jié)流默認(rèn)立即觸發(fā)保存作用域保存參數(shù)為空時(shí)立即觸發(fā)時(shí)間后觸發(fā)操作節(jié)流立即觸發(fā)節(jié)流總結(jié)

防抖動(dòng)與節(jié)流

點(diǎn)擊查看源碼

防抖動(dòng)

var debounce = function (fn, delay, isImmediate) {
    var timer = null;
    // 默認(rèn)不立即觸發(fā)
    isImmediate = typeof isImmediate === "undefined" ? false : isImmediate;

    return function () {
        var ctx = this, // 保存作用域
            args = arguments; // 保存參數(shù)
        // 初始化清空所有定時(shí)器
        if (timer) {
            clearTimeout(timer);
        }
        // 如果是立即觸發(fā)
        if (isImmediate) {
            if (!timer) { // timer為空時(shí)觸發(fā)操作
                fn.apply(ctx, args);
            }
            // delay時(shí)間后置空timer
            timer = setTimeout(_ => {
                timer = null;
            }, delay);
        } else { // delay時(shí)間后觸發(fā)操作
            timer = setTimeout(_ => {
                fn.apply(ctx, args);
            }, delay);
        }
    };
};

防抖動(dòng)立即觸發(fā)

防抖動(dòng)

節(jié)流

var throttle = function (fn, delay, isImmediate) {
    var timer = null;
    // 默認(rèn)立即觸發(fā)
    isImmediate = typeof isImmediate === "undefined" ? true : isImmediate;

    return function () {
        var ctx = this, // 保存作用域
            args = arguments; // 保存參數(shù)
        if (!timer) { // timer為空時(shí)
            if (isImmediate) fn.apply(ctx, args); // 立即觸發(fā)
            timer = setTimeout(function () {
                clearTimeout(timer);
                timer = null;
                if (!isImmediate) fn.apply(ctx, args); // delay時(shí)間后觸發(fā)操作
            }, delay);
        }
    };
};

節(jié)流立即觸發(fā)

節(jié)流

總結(jié)

防抖動(dòng)：將多個(gè)操作合并為一個(gè)操作（例如，鍵盤輸入關(guān)鍵字搜索內(nèi)容），在規(guī)定延時(shí)時(shí)間后觸發(fā)，如果在定時(shí)器時(shí)間范圍內(nèi)觸發(fā)，則會(huì)清楚定時(shí)器，重新計(jì)時(shí)

節(jié)流：在給定的延時(shí)時(shí)間后觸發(fā)一次操作，在此時(shí)間范圍內(nèi)的操作均不觸發(fā)（例如，圖片懶加載、向下無限滾動(dòng)獲取新數(shù)據(jù)）