高频：手写防抖函数 Debounce 之法

在前端开发中，处理用户频繁操作引发的事件是一个常见的挑战。比如，用户快速滚动页面、连续点击按钮或者频繁输入内容时，如果每次操作都触发相应的处理函数，可能会导致性能问题或者不必要的重复操作。这时候，防抖函数（Debounce）就派上用场了。

防抖函数的核心思想是在一段指定的时间内，如果触发了多次事件，只会执行最后一次或者在指定时间结束后执行一次。

下面我们来手写一个简单的防抖函数：

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

在上述代码中，我们定义了一个 debounce 函数，它接受要执行的函数 func 和延迟时间 delay 作为参数。内部通过 setTimeout 和 clearTimeout 来实现防抖效果。

在实际应用中，比如用户输入搜索框内容时进行实时搜索。如果不使用防抖函数，每次输入都会发送请求，这不仅会增加服务器的负担，还可能导致页面卡顿。使用防抖函数后，只有在用户输入停止一段时间后才会发送搜索请求。

再比如，窗口大小调整事件。频繁的窗口大小调整可能会导致页面频繁重绘，影响性能。通过防抖函数，可以在窗口大小调整停止一段时间后再进行相关的布局调整操作。

手写防抖函数能够让我们更加灵活地控制事件的触发时机，优化应用的性能和用户体验。但在使用时，要根据具体的业务场景合理设置延迟时间，以达到最佳的效果。

掌握手写防抖函数是提升前端开发技能的重要一环，能够有效地解决频繁触发事件带来的问题，让我们的应用更加流畅和高效。