JavaScript中的防抖（Debounce）和节流（Throttle）：作用与使用方式

引言

防抖（Debounce）

作用

使用方式

节流（Throttle）

作用

使用方式

总结

引言

在前端开发中，我们经常会遇到需要处理高频触发的事件，如窗口大小调整、输入框内容变化、滚动事件等。这些事件在用户与页面交互时非常频繁地发生，如果直接对它们进行响应，可能会导致浏览器性能下降，用户体验变差。为了解决这个问题，我们可以使用防抖（Debounce）和节流（Throttle）这两种技术来优化事件处理。

防抖（Debounce）

作用

防抖技术主要是用来限制某个函数在一定时间内只执行一次。例如，在输入框内容变化时，我们希望用户停止输入一段时间后才进行搜索请求，而不是每输入一个字符就发送一次请求。这时，我们就可以使用防抖技术来实现。

用通俗的话来说，就是“等一等再执行”。想象一下你正在填写一个搜索输入框，每输入一个字符，都会触发一个搜索请求。但是，这样会很低效，因为用户可能在连续输入多个字符后才完成他们的查询。防抖就是让你“等一等”，在用户停止输入一段时间后（比如半秒或一秒），再发送搜索请求。

使用方式

防抖函数通常接受一个需要被防抖的函数作为参数，并返回一个新的函数。这个新的函数会在最后一次调用后的指定时间间隔后执行原函数。如果在这个时间间隔内再次调用新的函数，那么原函数的执行会被取消，并重新计算时间间隔。

代码示例：

function debounce(func, wait) {  let timeout;  return function() {  const context = this;  const args = arguments;  // 清除之前的定时器  clearTimeout(timeout);  // 设置新的定时器  timeout = setTimeout(() => func.apply(context, args), wait);  };  
}

使用实例：

// 假设这是我们要防抖的函数，它模拟发送请求到服务器  
function sendRequest() {  console.log('Sending request...');  // 这里可以是发送网络请求的代码  
}  // 使用debounce函数创建一个新的函数  
const debouncedSendRequest = debounce(sendRequest, 500); // 设置500毫秒的等待时间  // 假设我们有一个按钮  
const button = document.querySelector('button');  // 给按钮添加点击事件监听器  
button.addEventListener('click', debouncedSendRequest);  // 现在，如果你快速点击按钮多次，它只会在最后一次点击后的500毫秒内发送一次请求  
// 而不是每次点击都发送请求

节流（Throttle）

作用

节流技术主要是用来限制某个函数在一定时间内执行的次数。与防抖不同的是，节流保证在一段时间内函数至少会执行一次。例如，在滚动事件中，我们希望每隔一段时间才触发一次滚动处理函数，而不是每次滚动都触发。

通俗的话来说，就是“别执行得太频繁了”。还是以搜索输入框为例，如果你设置了一个节流函数，那么不管用户输入得有多快，搜索请求都只会每隔一段时间（比如半秒）发送一次。

使用方式

节流函数同样接受一个需要被节流的函数作为参数，并返回一个新的函数。这个新的函数会在每次调用时检查距离上次执行的时间间隔，如果超过了指定的时间间隔，则执行原函数，并更新上次执行的时间。

代码示例：

function throttle(func, limit) {  let inThrottle;  return function() {  const context = this;  const args = arguments;  if (!inThrottle) {  func.apply(context, args);  inThrottle = true;  setTimeout(() => inThrottle = false, limit);  }  };  
}

使用实例：

// 假设这是我们要节流的函数，它模拟了某个耗时的操作  
function expensiveOperation() {  console.log('Expensive operation is running...');  // 这里可以是耗时的代码，比如网络请求、DOM操作等  
}  // 使用节流函数创建一个新的函数  
const throttledOperation = throttle(expensiveOperation, 2000); // 设置2秒的时间间隔  // 假设我们有一个按钮  
const button = document.querySelector('button');  // 给按钮添加点击事件监听器  
button.addEventListener('click', throttledOperation);  // 现在，无论你如何快速地点击按钮，expensiveOperation函数最多每2秒执行一次

在这个例子中，throttle 函数接受一个要节流的函数 func 和一个时间间隔 limit（以毫秒为单位）。它返回一个新的函数，这个新函数在被调用时会检查 inThrottle 变量。如果 inThrottle 为 false（表示当前不在节流期间），则执行原始函数 func，并将 inThrottle 设置为 true，同时启动一个定时器，在 limit 毫秒后将 inThrottle 设置为 false。如果 inThrottle 为 true（表示当前在节流期间），则不执行任何操作。