防抖

防抖

指的是连续触发事件，但是在设定的时间内只执行最后一次。最炸裂的解释是王者的回城操作，按 b 经过一段时间回水晶，如果你连续按 将一直按将会重新计时...

;

防抖伪代码
let timer = null
document.querySelector('.input').onkeyup = function() {
    if (timer !== null) {
        clearTimeout(timer);
    }
    timer = setTimeout(() => {
        console.log('我是防抖')
    }, 1000)
}


// 简单实现代码
function myDebounce(fn, wait) {
    let timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn();
        }, wait)
    }
}

应用场景

• 搜索框搜索输入
• 文本编辑框的实时保存

节流伪代码
let timer = null
document.querySelector('.input').onkeyup = function() {
    if (timer !== null) {
        return
    }
    timer = setTimeout(() => {
        console.log('我是节流');
        clearTimeout(timer)
    }, 1000)
}


// 简单代码实现
function myThrottle(fn, wait) {
    let timer;
    return function () {
        if (timer) {
            return;
        }
        timer = setTimeout(() => {
            fn();
            timer = null;
        })
    }
}

应用场景

• 鼠标滑动
• 高频点击
• resize事件、scroll事件 :::