防抖节流

防抖

防抖是事件触发n秒后再执行回调，如果n秒内再次触发事件，则重新计时。 类似于法师发动技能需要读条，还没读完再按技能则重新读条。

function debounce(fn) {
    let timer;
    return function() {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function(){
            fn();
            console.log('timer', timer);
            timer = null;
        }, 3000)
    }
}
document.querySelector('.box1').onmouseover = debounce(fn);

节流

节流是事件触发后立即执行回调，在n秒内再次触发事件，则直接返回。

function throttle(fn) {
    let timer;
    return function(){
        if (!timer) {
            fn();// 放在这里是单位时间开始前执行
            timer = setTimeout(function(){
                timer = null;
                fn(); // 放在这里则是单位时间结束后执行
            }, 3000)
        }
    }
}
document.querySelector('.box2').onmouseover = throttle(fn);

应用场景

• 防抖在停止操作后再执行回调，是为了处理高频发生的场景，比如window.resize, 监听用户输入等。
• 节流则重在控制频率，单位时间内只执行一次，场景比如监听滚动事件，防止重复提交等。