可以看看我的节流和防抖

防抖：

触发高频函数事件后，n秒内函数只能执行一次，如果在n秒内这个事件再次被触发的话，那么会重新计算时间。
即是，短时间内只需要触发一次的事件

function fn() {
    console.log(this)
}
let fangdou = function (fn, time) {
    let timeout; //闭包, 导致timeout未被回收
    return function () {
        timeout ? clearTimeout(timeout) : fn.call(this); //判断时间是否到达, call(this)讲button对象给fn
        timeout = setTimeout(() => { //到达防抖的时间, 则可以再次触发
            timeout = null;
        }, time)
    }
}
document.querySelectorAll('button')[0].addEventListener('click',  fangdou(fn, 2000))

节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

既是, 需要高频率触发的事件

let jieliu = function (fn, time) {
    let timeout; //闭包, 导致timeout未被回收
    return function () {
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
            }, time) //无需重置
            fn.call(this);
        }
    }
}
document.querySelectorAll('button')[0].addEventListener('click', jieliu(fn, 1000))