JS中防抖函数介绍与实现（秒懂如何手写防抖）

防抖函数通常用于优化高频率触发的事件，如输入框的输入事件。防抖函数会延迟执行事件处理器，直到最后一次触发事件经过了设定的等待时间。这样可以减少不必要的计算或DOM操作。

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

function debounce(fn, wait) {
    let timeout = null;
    return function() {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait);
        if (callNow) fn.apply(context, args);
    };
}

使用方法：

// 假设handleSearch是需要防抖的事件处理函数
let handleSearch = debounce(function() {
    // 实际的事件处理逻辑
    console.log('搜索事件被触发');
}, 200); // 200毫秒内不会重复触发
 
// 添加事件监听
window.addEventListener('scroll', handleSearch);

当滚动窗口时，handleSearch函数会每200毫秒才会执行一次，从而减少了高频率的函数调用。