前提

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的情况会每隔一定时间（参数wait）调用函数。

1. 防抖

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

防抖的实现：

function debounce(func, wait) {
    let timer = null;
    return function () {
        const context = this;
        
        timer && clearTimeout(timer)
        timer = setTimeout(function(){
            func.apply(context)
        }, wait);
    }
}

总结

先定义了一个timer，在每次调用的时候都会清除这个定时器，比如点击按钮，我们设置wait为1s，第一次点击之后，会等1s之后才执行，但是如果第二次的点击时间在第一次点击后的0.5s，那么就会先清除定时器，也就是说，第一次的点击事件作废，重新进行第二次点击的事件，并且重新计算延迟时间，也就是说两次的点击之后，等到方法执行会等1.5s的时间。所以防抖是保证只执行规定时间内的最新一次。

2. 节流

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

节流的实现：

function throttle(func, wait) {
    let context;
    let canRun = true;
    let timer

    return function() {
        if(!canRun) return;
        canRun = false;
        context = this;
        setTimeout(() => {
            canRun = true;
            func.applay(context)
        }, wait)
    }
}

总结

定义了一个变量canRun用于控制wait时间内是否可以再次触发事件。比如，wait我们设置1s，首次执行会将canRun赋值为false，在1s时间内再次执行，不会触发操作。也就是说，如果你点击了第一次，只需要等1s就会触发事件，1s之内的其他所有点击都无效。所以节流是保证只执行规定时间内的第一次。

两者区别

下面用一张图展示一下：