这一次彻底搞懂JS中的防抖和节流（面试必问）

const btn = document.querySelector('#input');
btn.addEventListener('click',debounce(submit,3000),false);
function submit(e) {
    console.log(1);
}
// 防抖函数：最后一次点击之后，3秒之内的点击都无效
function debounce(fn,timer) {
    let t = null;
    return function() {
        // 判断是否是第一次执行
        let firstClick = !t;
        // 如果不是第一次执行，则清空延时  之所以要清空延时就是要防止前面的定时器对最新的定时器产生影响，
        if (t) { clearTimeout(t)};
        // 如果是第一次执行则直接执行
        if (firstClick) {
            fn.apply(this,arguments)
        }
        // 在第一次点击之后 间隔的规定时间之后，才将t置为null 为下一次第一次点击做准备
        t = setTimeout(() => {
            t = null;                    
        },timer)
    }
}
复制代码

const btn = document.querySelector('#input');
btn.addEventListener('click',throttle(submit,2000),false);
function submit(e) {
    console.log(1);
}
// 节流函数：减少一段时间的触发频率，只有在上一次成功触发 间隔规定时间之后才能再次成功触发。
function throttle(fn,delay) {
    let begin = 0;
    return function() {
        let cur = new Date().getTime();
        if (cur - begin > delay) {
            fn.apply(this,arguments);
            begin = cur;
        }
    }
}
复制代码