手写防抖和节流，以及两者之间的区别

Epicurus2025-03-08 16:08

手写防抖和节流，以及两者之间的区别

防抖（Debounce）和节流（Throttle）是两种常见的优化高频事件处理的技术。它们的主要目的是减少事件触发的频率，从而提高性能。

1. 防抖（Debounce）

防抖的核心思想是：在事件触发后，等待一段时间（例如 n 毫秒），如果在这段时间内没有再次触发事件，才执行处理函数。如果在等待时间内又触发了事件，则重新计时。

应用场景：输入框实时搜索、窗口大小调整等。

javascript 复制代码

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
    };
}

// 示例用法
const input = document.querySelector('input');
input.addEventListener('input', debounce(function() {
    console.log('Input value:', input.value);
}, 300));

2. 节流（Throttle）

节流的核心思想是：在一定时间间隔内（例如 n 毫秒），只执行一次处理函数。即使在这段时间内事件被多次触发，也只会执行一次。

应用场景：滚动事件、鼠标移动事件等。

javascript 复制代码

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

// 示例用法
window.addEventListener('scroll', throttle(function() {
    console.log('Scrolling...');
}, 200));

3. 防抖和节流的区别

防抖：在事件触发后，等待一段时间，如果在这段时间内没有再次触发事件，才执行处理函数。如果在等待时间内又触发了事件，则重新计时。
节流：在一定时间间隔内，只执行一次处理函数。即使在这段时间内事件被多次触发，也只会执行一次。

总结

防抖：适合处理连续触发的事件，但只关心最后一次触发的结果（如输入框实时搜索）。
节流：适合处理连续触发的事件，但希望在一定时间间隔内只执行一次（如滚动事件）。

通过合理使用防抖和节流，可以有效地优化高频事件的处理，提升用户体验和性能。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github