前端防抖 - PromptOnce

前端防抖（Debounce）详解及应用

在前端开发中，用户的操作可能会频繁触发事件，如输入框输入、窗口大小调整、按钮点击等。如果每次事件都立即触发相应的处理逻辑，可能会导致性能问题，甚至让用户体验变差。为了解决这些问题，我们可以使用防抖（Debounce）技术。防抖可以有效减少高频事件的处理次数，提高页面性能。

本文将从防抖的定义、实现、应用场景等多个方面进行详细讲解。

一、什么是防抖？

防抖的基本概念是：在事件触发后，等待一定时间才执行回调函数，如果在等待时间内事件再次触发，则重新计时。防抖的主要目的在于减少不必要的高频触发，确保函数仅在一段时间后且没有其他触发事件时才执行。

防抖的典型例子：

用户在搜索框中输入时，可能每个字符输入都会触发搜索请求。如果用户连续输入多个字符，就会发起多次请求。但实际上我们只希望用户停止输入时，再触发一次搜索。这时候，防抖就可以派上用场了。

二、防抖的原理及实现

1. 核心原理

防抖的核心原理是利用定时器，在事件触发时，不立即执行回调函数，而是延迟执行。如果在延迟期间事件再次触发，则清除之前的定时器，重新开始计时。只有当设定的延迟时间结束且没有新事件触发时，才会执行回调函数。

2. 防抖的基本实现

我们可以通过 setTimeout 和 clearTimeout 来实现防抖功能：

function debounce(fn, delay) {
    let timer;  // 用于保存定时器的ID
    return function(...args) {
        if (timer) clearTimeout(timer);  // 如果定时器存在，先清除
        timer = setTimeout(() => {
            fn.apply(this, args);        // 在指定延迟后执行函数
        }, delay);
    };
}

这个 debounce 函数接受两个参数：

fn：需要防抖的函数。
delay：延迟时间（毫秒）。

关键点在于：每次调用返回的函数时，都会重置定时器，只有在最后一次触发后的延迟时间过去，才会执行传入的函数。

3. 防抖函数的使用

我们可以将防抖应用在用户的输入事件中，比如搜索框：

function search() {
    console.log("搜索请求发起");
}

const debouncedSearch = debounce(search, 300);

document.querySelector('input').addEventListener('input', debouncedSearch);

在上面的例子中，每次用户在输入框中输入字符时，都会触发 input 事件。由于 search 函数被防抖处理，只有用户停止输入并且超过300毫秒后，搜索请求才会真正发出。

三、防抖的应用场景

1. 搜索框输入

在用户输入时，避免每次字符变化都发起请求。防抖可以确保只在用户停止输入后的一段时间触发搜索请求。

2. 窗口调整大小

当用户调整浏览器窗口大小时，频繁触发 resize 事件，可能会导致页面性能下降。防抖可以保证在用户停止调整窗口大小后一段时间再执行相关操作。

1
2
3

window.addEventListener('resize', debounce(() => {
    console.log('窗口大小调整后处理逻辑');
}, 300));

3. 按钮点击

有时我们需要防止按钮被短时间内重复点击，如避免表单多次提交。通过防抖，可以防止按钮被频繁点击触发事件。

4. 滚动事件

滚动页面时，会触发 scroll 事件，如果绑定了复杂的处理逻辑，可能会导致性能问题。防抖可以减少滚动时触发处理函数的频率。

四、防抖和节流的区别

在前端优化中，防抖（Debounce）和节流（Throttle）是常用的两种技术。虽然它们都用于限制函数的触发频率，但原理和应用场景有所不同。

防抖（Debounce）：在连续事件触发的情况下，只执行最后一次触发后的函数。例如：用户输入完成后的搜索请求。
节流（Throttle）：确保在一定时间间隔内，函数只执行一次。例如：滚动条滚动时，控制每100ms执行一次滚动逻辑。

两者的区别可以简单理解为：

防抖：电梯等人，如果有新乘客进入，电梯门重新打开，直到没有人进入才开始运行。
节流：定时发车，公交车无论人是否已到齐，每隔固定时间发车一次。

五、带立即执行的防抖

在某些情况下，我们可能希望函数在首次触发时立即执行，而不是等到延迟结束后才执行。例如：在用户开始输入时立即发起一个搜索请求，然后在后续输入时使用防抖。

为此，我们可以在防抖函数中增加一个immediate参数来实现：

function debounce(fn, delay, immediate = false) {
    let timer;
    return function(...args) {
        const callNow = immediate && !timer;  // 判断是否立即执行
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            timer = null;
            if (!immediate) fn.apply(this, args);
        }, delay);
        if (callNow) fn.apply(this, args);  // 立即执行
    };
}

在这种实现中，如果 immediate 参数为 true，则函数在第一次事件触发时立即执行，然后在延迟时间内不会再次触发。

六、总结

防抖（Debounce）是一种常用的前端优化手段，用于处理高频事件，通过延迟执行回调函数来减少不必要的操作，提升性能。它适用于输入框搜索、窗口调整、按钮点击等场景。

通过本文的讲解，相信你已经掌握了防抖的概念、原理以及实际应用。防抖技术简单而高效，合理使用防抖可以显著提升页面性能并改善用户体验。在开发中根据不同的场景选择合适的优化方式（防抖或节流），能让应用更加高效和顺畅。

最后一点小建议：在复杂应用中，防抖技术需要和业务逻辑合理搭配。例如，在输入框防抖的场景中，可能还需要考虑到用户的快速输入与响应速度间的平衡。

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。