備注：以下僅為防抖和節(jié)流代碼思路解釋?zhuān)瑢?shí)際應(yīng)用中需根據(jù)需要做相應(yīng)調(diào)整。僅供參考。

防抖

const debounce = (fn, delay) => {
    let timeout = null;
    return (...rest) => {
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn.apply(this, rest);
        }, delay);
    };
};

代碼解釋?zhuān)?br> 1.第一次進(jìn)入防抖方法，設(shè)置定時(shí)器，延時(shí)執(zhí)行方法fn。
2.第二次進(jìn)入防抖方法，timeout條件符合 則清除定時(shí)器，fn方法被清掉。
3.除非某次執(zhí)行的速度晚于延時(shí)（delay）的時(shí)間，才執(zhí)行一次fn方法
4.以此達(dá)到防抖的效果。
總結(jié)：防抖就是在多次連續(xù)執(zhí)行方法時(shí)（如連續(xù)請(qǐng)求接口），通過(guò)定時(shí)器延時(shí)，符合延時(shí)時(shí)機(jī)的時(shí)候，才執(zhí)行一次方法（接口請(qǐng)求）。如果在延時(shí)時(shí)間內(nèi)請(qǐng)求，則重新開(kāi)啟定時(shí)器。

節(jié)流

// 定時(shí)器版節(jié)流
const throttle = (fn, delay) => {
    let timeout = null;
    return (...rest) => {
        if (!timeout) {
            fn.apply(this, rest);
            timeout = setTimeout(() => {
                timeout = null;
            }, delay);
        }
    };
};

代碼解釋?zhuān)?br> 1.第一次進(jìn)入節(jié)流方法，timeout條件符合，執(zhí)行fn方法。
2.設(shè)置定時(shí)器timeout，條件變?yōu)椴环稀?br> 3.定時(shí)器延時(shí)（delay）設(shè)置timeout為null，條件變?yōu)榉稀?br> 4.進(jìn)而執(zhí)行一次fn方法。
總結(jié)：節(jié)流就是在多次連續(xù)執(zhí)行方法時(shí)（如滾動(dòng)條執(zhí)行事件），通過(guò)定時(shí)器延時(shí)，每隔一段時(shí)間，才執(zhí)行一次方法。即每隔一段時(shí)間執(zhí)行一次。

// 時(shí)間戳版節(jié)流
const throttle = (fn, delay) => {
    let last = 0;
    return (...rest) => {
        const now = Date.now();
        if (now >= delay + last) {
            fn.apply(this, rest);
            last = now;
        }
    };
};

代碼解釋?zhuān)?br> 1.第一次進(jìn)入節(jié)流方法，條件符合，設(shè)置當(dāng)前時(shí)間戳，執(zhí)行fn方法。
2.第二次進(jìn)入節(jié)流方法，新的時(shí)間戳大于等于延時(shí)（delay）加上次時(shí)間戳，則條件成立繼續(xù)執(zhí)行fn方法。
3.中間延時(shí)（delay）的時(shí)間間隔，即達(dá)到了節(jié)流的作用。

總結(jié)：節(jié)流就是在多次連續(xù)執(zhí)行方法時(shí)（如滾動(dòng)條執(zhí)行事件），通過(guò)時(shí)間戳和延時(shí)相加對(duì)比，大于時(shí)間間隔的，才執(zhí)行一次方法。即每隔一段時(shí)間執(zhí)行一次。