【学习笔记】JavaScript中的防抖（Debouncing）和节流（Throttling）

防抖（Debouncing）和节流（Throttling）是JavaScript中常用的两种优化技术，用于控制高频率事件的执行次数，以提高性能。它们在处理诸如滚动、窗口调整大小、输入框输入等频繁触发的事件时特别有用。

防抖（Debouncing）

防抖的基本思想是：在事件触发后，等待一定时间，如果在这段时间内没有再次触发该事件，则执行事件处理函数；如果在这段时间内事件再次触发，则重新开始计时。

实现防抖的代码示例：

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

// 示例用法
const handleResize = debounce(() => {
    console.log('Window resized');
}, 500);

在上面的示例中，handleResize函数在触发时被调用，但只有在操作结束后的500毫秒内没有再次触发时，才会执行实际的处理逻辑。

节流（Throttling）

节流的基本思想是：在一定时间内，只允许事件处理函数执行一次。即使在这段时间内事件频繁触发，处理函数也只会在规定的时间间隔内执行一次。

实现节流的代码示例：

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function(...args) {
        const context = this;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}

// 示例用法
const handleScroll = throttle(() => {
    console.log('Scroll event');
}, 1000);

在这个示例中，handleScroll函数在触发时被调用，但在任何1秒的时间间隔内，这个函数最多只能执行一次。

总结

• 防抖（Debouncing）：确保在事件结束后的一段时间内只执行一次函数，适用于避免因频繁触发而导致的多次执行。例如：用户输入完成后的搜索建议、窗口调整大小后的重绘。

• 节流（Throttling）：确保在一定时间间隔内只执行一次函数，适用于控制频繁触发的事件的执行频率。例如：滚动事件、鼠标移动事件。

这两种技术都能显著提高应用的性能，尤其是在处理高频事件时。