从新手到高手：掌握前端开发中的节流和防抖

2023-10-25 15:24:18

节流与防抖：前端开发中的必备技能

在前端开发中，经常会遇到需要处理用户输入或其他频繁触发的事件的情况。为了避免不必要的请求或计算，提高性能和用户体验，我们需要使用节流和防抖技术。

节流：控制函数的调用频率

节流是指在一定时间间隔内，只允许函数被调用一次。当函数被多次调用时，只有第一次的调用会被执行，后续的调用都会被忽略。节流可以有效地防止函数被过度调用，从而提高性能和避免不必要的计算。

节流的实现

在 JavaScript 中，可以使用 setTimeout() 函数来实现节流。以下是一个简单的节流函数：

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

这个函数接受两个参数：要节流的函数 func 和节流的延迟时间 delay。当函数 func 被调用时，如果 timer 为 null，则立即执行函数 func，并设置 timer 为一个延时 delay 毫秒后执行的函数。如果在 delay 毫秒内函数 func 被再次调用，则会取消前一个延时函数，并重新设置 timer。这样，函数 func 最多会在 delay 毫秒内被调用一次。

节流的应用场景

节流通常用于处理用户输入事件，如键盘输入、鼠标点击等。例如，在用户输入用户名时，我们可以使用节流来限制用户名输入框的 keyup 事件的触发频率，从而避免在用户输入过程中频繁向服务器发送请求。

防抖：延迟函数的执行

防抖是指在一段时间内，如果函数被多次调用，则只执行最后一次调用。防抖可以有效地防止函数被多次调用，从而提高性能和避免不必要的计算。

防抖的实现

在 JavaScript 中，可以使用 setTimeout() 和 clearTimeout() 函数来实现防抖。以下是一个简单的防抖函数：

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

这个函数接受两个参数：要防抖的函数 func 和防抖的延迟时间 delay。当函数 func 被调用时，如果 timer 为 null，则立即设置 timer 为一个延时 delay 毫秒后执行的函数。如果在 delay 毫秒内函数 func 被再次调用，则会取消前一个延时函数，并重新设置 timer。这样，函数 func 只会在最后一次调用 delay 毫秒后被执行一次。