JavaScript中如何实现函数防抖？

函数防抖是一种优化技术，用于处理频繁触发的事件。实现步骤包括：1. 设置一个定时器，每次事件触发时清除之前的定时器并重新设置新的定时器；2. 如果在定时器时间内没有新的事件触发，则执行定义的函数。

在 JavaScript 中，函数防抖（Debounce）是一种优化技术，常用于处理频繁触发的事件，比如窗口resize、滚动事件或输入框的keyup事件。防抖的核心思想是，在一定时间内，如果事件被频繁触发，我们只执行最后一次触发的事件处理函数。这对于提高性能、减少不必要的计算和API调用非常有用。

我第一次接触函数防抖是在开发一个实时搜索功能时。那时，每次用户输入一个字符，代码都会立即发起一个请求到后端，这显然是低效且浪费资源的。通过实现防抖，我成功地将请求频率大幅降低，显著提升了用户体验。

实现防抖的基本思路是设置一个定时器，每次事件触发时，都会清除之前的定时器，并重新设置一个新的定时器。如果在定时器时间内没有新的事件触发，那么定时器到期时就会执行我们定义的函数。

立即学习“Java免费学习笔记（深入）”；

来看一个具体的实现：

function debounce(func, delay) {    let timeoutId;    return function (...args) {        clearTimeout(timeoutId);        timeoutId = setTimeout(() => func.apply(this, args), delay);    };}// 使用示例const handleSearch = debounce((query) => {    console.log(`Searching for: ${query}`);}, 300);document.getElementById('searchInput').addEventListener('keyup', (e) => {    handleSearch(e.target.value);});

登录后复制