Skip to content

防抖和节流

🕒 Published at:
  • 防抖:适用于处理用户停止频繁操作后的事件执行,例如输入框内容变动的场景。
  • 节流:适用于控制高频事件的触发频率,例如滚动、窗口调整等场景。

都是为了优化性能,防止不必要的重复操作或过多的资源消耗。

防抖(Debounce)

防抖的作用是减少频繁触发事件,确保只有最后一次操作得到执行。防抖适用于那些用户可能会频繁触发的操作,但我们只关心最后一次操作结果的场景。

实现上,防抖通过计时器 setTimeout 来实现。如果在规定时间内用户再次触发了该事件,计时器就会被重置,只有当用户停止操作超过设定的时间时,计时器才会执行回调函数。

应用场景

  • 输入框的实时搜索建议。
  • 窗口调整大小时的处理。

手写防抖

js
function debounce(fn, delay) {
    let timer = null;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}
//使用
const handleInput = debounce(function() {
    console.log('Input processed:', this.value);
}, 500);

document.querySelector('input').addEventListener('input', handleInput);

节流(Throttle)

节流的作用是控制高频事件的触发频率,使得在一段时间内只能执行一次。节流适用于那些可能会频繁触发的操作,但我们希望在特定时间间隔内控制执行次数的场景。

实现上,节流可以通过标志位(flag)来控制函数的执行。函数在第一次执行后,会设置一个标志位阻止后续的执行,直到设定的时间间隔过去,再重置标志位以允许下一次执行。

应用场景

  • 滚动事件处理(如懒加载)。
  • 按钮点击事件(避免多次提交)。

手写节流

js
function throttle(fn, interval) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime >= interval) {
            lastTime = now;
            fn.apply(this,args);
        }
    };
}
//使用
const handleScroll = throttle(function() {
    console.log('Scroll event processed');
}, 500);

window.addEventListener('scroll', handleScroll);