防抖函数-复习

防抖函数（Debounce Function）是一种常用的性能优化技术，特别是在处理频繁触发的事件时非常有用，例如窗口大小改变、滚动事件、输入框输入等。其核心思想是在一定时间内，只让最后一次操作生效，而忽略之前的操作。

实现原理

防抖函数的实现原理非常简单：

1. 延迟执行：设置一个定时器，在指定的延迟时间后执行操作。
2. 清除定时器：每次触发事件时先清除之前设置的定时器。
3. 重新设置定时器：重新设置定时器，延迟执行操作。

这样做的效果是，如果在指定的延迟时间内又触发了事件，就会清除之前的定时器并重新设置一个新的定时器，直到最后一次事件触发后，才会执行实际操作。

JavaScript 实现

下面是一个简单的 JavaScript 防抖函数的实现：

function debounce(func, delay) {
    let timerId;
    return function() {
        const context = this;
        // arguments接收传进来的参数
        const args = arguments;
        clearTimeout(timerId);
        timerId = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}

使用方法

使用时，将需要进行防抖的函数和延迟时间传递给 debounce 函数，它将返回一个新的函数。当这个新函数被调用时，它会在指定的延迟时间后执行传入的函数。如果在这段时间内再次调用该新函数，会重新计时延迟时间，直到最后一次调用。

示例

假设有一个搜索框，我们希望在用户输入停止 300ms 后执行搜索操作，可以这样使用防抖函数：

const searchInput = document.getElementById('searchInput');

function handleSearch() {
    // 模拟搜索操作
    console.log('Searching for:', searchInput.value);
    // 实际中可能调用搜索接口等操作
}

const debouncedSearch = debounce(handleSearch, 300);

searchInput.addEventListener('input', debouncedSearch);

// 可以传入参数
searchInput.addEventListener('input', function(e){
    debouncedSearch(e.target.value)
});

在这个示例中，handleSearch 函数被传递给 debounce 函数，并且设置了 300ms 的延迟时间。每次输入框的输入事件被触发时，会调用 debouncedSearch 函数。如果用户连续输入，handleSearch 函数只有在最后一次输入后的 300ms 才会执行。

总结

防抖函数通过限制一定时间内的函数调用次数，有效减少了频繁操作带来的性能负担，特别是在处理用户输入或者频繁触发的 UI 更新时非常有用。