节流与防抖：代码实现，搜索框优化

2023-10-06 04:04:25

正文
在前端开发中，为了提高用户体验和应用程序的响应速度，常常需要对事件处理函数进行优化。节流和防抖是两种常用的优化技巧，可以有效地防止事件处理函数被过度触发，从而避免不必要的性能消耗。

节流

节流是指在一定时间间隔内只执行一次事件处理函数，即使在该时间间隔内事件被触发多次。节流的实现方式有很多种，其中一种简单的方法是使用定时器。

function throttle(func, wait) {
  let timer = null;
  return function (...args) {
    if (!timer) {
      func.apply(this, args);
      timer = setTimeout(() => {
        timer = null;
      }, wait);
    }
  };
}

在这个示例中，throttle 函数接受两个参数：func 是要被节流的事件处理函数，wait 是节流的时间间隔（以毫秒为单位）。当事件被触发时，throttle 函数首先检查定时器是否已经存在。如果定时器不存在，则执行事件处理函数 func，并创建一个新的定时器。定时器会在 wait 毫秒后触发，并重置定时器变量为 null。这样，在 wait 毫秒内，事件处理函数 func 只会被执行一次。

节流经常被用于优化搜索框的搜索功能。当用户在搜索框中输入内容时，搜索结果会不断地更新。如果不对搜索事件进行节流，则搜索结果会不断地刷新，这可能会导致性能问题。通过使用节流，我们可以限制搜索结果的更新频率，从而提高性能。

防抖

防抖是指在一段时间内只执行一次事件处理函数，但只有在该时间间隔内没有其他事件被触发时才会执行。防抖的实现方式也多种，其中一种方法是使用定时器。

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

在这个示例中，debounce 函数接受两个参数：func 是要被防抖的事件处理函数，wait 是防抖的时间间隔（以毫秒为单位）。当事件被触发时，debounce 函数首先检查定时器是否已经存在。如果定时器不存在，则创建一个新的定时器。定时器会在 wait 毫秒后触发，并执行事件处理函数 func。如果在 wait 毫秒内又发生了事件，则会重置定时器，从而防止 func 函数被执行。

防抖经常被用于优化登录按钮的点击事件。当用户点击登录按钮时，登录请求会发送到服务器。如果不对登录按钮的点击事件进行防抖，则用户可能会多次点击登录按钮，从而导致服务器收到重复的登录请求。通过使用防抖，我们可以限制登录按钮的点击频率，从而防止重复的登录请求。