https://www.cnblogs.com/shapeY/p/7773983.html
防抖和節(jié)流

function throttle(fn, interval = 300) {
    let canRun = true;
    return function () {
        if (!canRun) return;
        canRun = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            canRun = true;
        }, interval);
    };
}
//一定時間間隔內(nèi)只會執(zhí)行一次任務(wù)
//規(guī)定在一個單位時間內(nèi)，只能觸發(fā)一次函數(shù)。如果這個單位時間內(nèi)觸發(fā)多次函數(shù)，只有一次生效
//函數(shù)的節(jié)流就是通過閉包保存一個標記（canRun = true），在函數(shù)的開頭判斷這個標記是否為 true，如果為 true 的話就繼續(xù)執(zhí)行函數(shù)，否則則 return 掉，判斷完標記后立即把這個標記設(shè)為 false，然后把外部傳入的函數(shù)的執(zhí)行包在一個 setTimeout 中，最后在 setTimeout 執(zhí)行完畢后再把標記設(shè)置為 true（這里很關(guān)鍵），表示可以執(zhí)行下一次的循環(huán)了。當 setTimeout 還未執(zhí)行的時候，canRun 這個標記始終為 false，在開頭的判斷中被 return 掉。

function debounce(fn, interval = 300) {
    let timeout = null;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, interval);
    };
}
//任務(wù)頻繁觸發(fā)下,只有任務(wù)觸發(fā)的間隔超過指定間隔，任務(wù)才會執(zhí)行
//在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計時。
//通過閉包保存一個標記來保存 setTimeout 返回的值，每當用戶輸入的時候把前一個 setTimeout clear 掉，然后又創(chuàng)建一個新的 setTimeout，這樣就能保證輸入字符后的 interval 間隔內(nèi)如果還有字符輸入的話，就不會執(zhí)行 fn 函數(shù)了。

//很形象的比喻。節(jié)流防抖就好比乘電梯，比如delay是10秒，那么防抖就是電梯每進來一個人就要等10秒再運行，而節(jié)流就是電梯保證每10秒可以運行一次
//它和防抖動最大的區(qū)別就是，節(jié)流函數(shù)不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)。