【JS】节流与防抖技术

JavaScript: 节流与防抖技术

当用户进行滚动、调整窗口大小或进行频繁的键盘输入时，页面上的某些事件处理器可能会被频繁触发。如果每次事件触发都执行函数，可能会对性能产生显著影响。在这种情况下，我们可以利用节流（Throttle）和防抖（Debounce）技术来优化性能。

节流（Throttle）

节流是一种限制函数执行频率的技术。使用节流时，函数在一个固定的时间间隔内只被允许执行一次。即使在这个时间间隔内事件被多次触发，函数也只会执行一次。

这种技术特别适用于处理如滚动事件和窗口大小调整这样的事件，因为它们可能会在短时间内被频繁触发。

实现节流函数

下面是一个如何实现节流函数的示例：

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function() {
        const context = this;
        const args = arguments;
        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));
        }
    }
}

你可以这样使用它：

window.addEventListener('resize', throttle(function() {
    console.log('Resize event handler called every 1000ms');
}, 1000));

防抖（Debounce）

与节流相比，防抖技术延迟函数的执行直到事件停止触发后一段时间。如果在等待时间内事件再次被触发，则延时将重新开始。

这种技术适用于那些我们只关心事件触发后结果而不关心过程的情况，例如搜索框输入。

实现防抖函数

以下是实现防抖函数的示例：

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

使用方法如下：

const input = document.getElementById('input');
input.addEventListener('keyup', debounce(function() {
    console.log('Input value:', this.value);
}, 300));