前端知识速记：节流与防抖

前端知识速记：节流与防抖

什么是防抖？

防抖是一种控制事件触发频率的方法，通常用于处理用户频繁触发事件的场景。防抖的核心思想是将多个连续触发事件合并为一个事件，以减少执行次数。它在以下场景中特别有效：

• 输入框输入事件：实时搜索、输入验证等。
• 窗口调整大小（resize）事件：减少窗口大小变化时的处理频率。

防抖的实现

防抖的实现依赖于计时器。每次触发事件时，都会重置计时器，只有在事件停止触发一定时间后才执行该事件处理函数。

function debounce(fn, delay) {
    let timer = null;
    return function(...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

// 使用示例
const input = document.getElementById('input');
input.addEventListener('input', debounce(() => {
    console.log('用户输入:', input.value);
}, 300));

在这个例子中，输入事件会在用户停止输入后 300 毫秒触发，避免了频繁的输出。

什么是节流？

节流与防抖的目标相似，但其实现方式有所不同。节流是指限制事件的触发频率，保证在一定时间内事件只会执行一次。节流特别适合以下场景：

• 滚动监听：限制滚动事件的处理，避免性能瓶颈。
• 定时器定时执行任务：实现定期执行的功能。

节流的实现

节流可以通过时间戳或定时器实现。这里展示使用时间戳进行节流的示例：

function throttle(fn, limit) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime >= limit) {
            lastTime = now;
            fn.apply(this, args);
        }
    };
}

// 使用示例
window.addEventListener('scroll', throttle(() => {
    console.log('用户在滚动');
}, 500));

在这个例子中，用户滚动事件的处理函数每 500 毫秒最多触发一次，以减少计算量和提高性能。

节流与防抖的区别

• 触发时机：防抖在事件触发后的一段时间内若再次触发则会重新计时，保证事件只执行一次；而节流是保证在一定时间内只执行一次，无论事件触发了多少次。
• 适用场景：防抖适用于用户输入等需要等待用户停止操作的场景；节流适用于需要在一定时间内持续操作的场景，例如滚动或窗口缩放。