剖析 throttle 与 debounce 源码，理解节流与防抖背后的原理与应用场景

前言

在前端开发中，我们经常会遇到需要对函数执行频率进行控制的情况，比如当用户在输入框中输入内容时，我们可能希望在用户停止输入一段时间后才触发搜索请求。此时，我们就可以使用节流或防抖来控制函数的执行频率。throttle(节流)和debounce(防抖)都是用来控制函数执行频率的，但它们的工作原理却有所不同。

throttle(节流)

节流函数会在一定时间内只执行一次，即使在这个时间内函数被调用多次。节流函数通常用于控制那些不需要频繁执行的函数，比如滚动事件、调整窗口大小事件等。

// 节流函数
const throttle = (fn, delay) => {
  let timer = null;
  return (...args) => {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
};

debounce(防抖)

防抖函数会在触发事件后，在 n 秒后才能执行一次。如果在 n 秒内又触发了事件，则会重新计算函数的执行时间。防抖函数通常用于控制那些需要在用户停止操作后才执行的函数，比如搜索请求、提交表单等。

// 防抖函数
const debounce = (fn, delay) => {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

应用场景

节流和防抖在前端开发中都有广泛的应用场景，以下是一些具体的例子：

• 节流：

  • 滚动事件：在滚动事件中，我们可以使用节流函数来控制滚动条的滚动频率，避免滚动条过于频繁地触发滚动事件。
  • 调整窗口大小事件：在调整窗口大小事件中，我们可以使用节流函数来控制窗口大小调整的频率，避免窗口大小过于频繁地触发调整窗口大小事件。

• 防抖：

  • 搜索请求：在搜索框中输入内容时，我们可以使用防抖函数来控制搜索请求的触发频率，避免在用户输入内容的过程中频繁地触发搜索请求。
  • 提交表单：在提交表单时，我们可以使用防抖函数来控制表单提交的频率，避免用户在短时间内重复提交表单。

总结

节流和防抖都是用来控制函数执行频率的，但它们的工作原理却有所不同。节流函数会在一定时间内只执行一次，即使在这个时间内函数被调用多次。防抖函数会在触发事件后，在 n 秒后才能执行一次。如果在 n 秒内又触发了事件，则会重新计算函数的执行时间。在前端开发中，节流和防抖都有广泛的应用场景，我们根据具体的业务需求来选择使用节流或防抖。