防抖

概念：在事件被触发n秒后再执行回调，如果在n秒内又被触发，则重新计时。
应用：常用于input框输入请求资源、window触发resize回调时。上代码：

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

下面是防抖的一种变形，立即执行回调，在n秒内再触发不再执行。

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

节流

概念：在单位时间内，只能触发一次回调。上代码：时间戳版

function throttle(fn, delay) {
    let prev = Date.now();
    return function (...args) {
        let now = Date.now();
        if (now - prev >= delay) {
            fn.apply(this, args);
            prev = now;
        }
    }
}

定时器版

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

两个版本的区别：时间戳版的函数触发是在时间段初始定时器版的函数触发是在时间段末尾。

以上仅作为个人学习输出。

几句话讲防抖节流

防抖

节流