路过看下系列：节流防抖

防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。一段时间内，持续事件只在停止持续后执行一次

举个例子，窗口滚动scroll事件会在你滚动的时候一直触发，比如你滚动了3s，可能触发了30次doSomething()。

 window.onscroll = function(){doSomething();}

但是我们如果只想在这3s内只触发一次，那么就可以用防抖函数来实现

//在停止滚动后的100ms后，执行函数
window.onscroll = debounce(doSomething, 100);

debounce：

function debounce(fn, delay) {
    let timer;
    return function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    }
}

运用场景：滚动条滑动，鼠标拖动，窗口resize，input输入等，一段时间内频繁触发的事件。

节流

一段时间内，会每隔一段时间固定调用一次。

请注意，是每隔一段时间固定执行一次，不像防抖（防抖是在停止操作后只执行一次）。

还是举上面的这个例子，在页面滚动的时候，不管你滚动多久，我希望是每隔1000ms固定执行一次。那么就用下面的函数来实现。

防抖是在你滚动100s后执行一次，节流是在你滚动100s中平均执行100次.

throttle：

// 用isExecute参数
function throttle(fn, delay) {
    let isExecute = false;
    return function (...args) {
        if (isExecute) return;
        isExecute = true;
        setTimeout(() => {
            fn.apply(this, args);
            isExecute = false;
        }, delay);
    }
}
// 用timer参数
function throttle(fn, delay) {
    let timer = null;
    return function (...args) {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args);
                timer = null;
            }, delay);
        }
    }
}

适用场景 ：比较适用于ui变化的平滑过渡等场景。