JS 技能进阶 | 节流防抖，让你的代码更高效

2023-09-01 10:56:31

作为一名 JavaScript 开发人员，我们经常会遇到一些场景，需要处理频繁触发的事件，例如用户输入搜索框、滚动条滚动、鼠标移动等。如果我们对这些事件不进行任何处理，那么就会导致大量的函数调用，从而降低代码的性能和用户体验。

为了解决这个问题，我们可以使用节流和防抖技术。节流和防抖都是函数调用的优化技巧，但它们的工作原理不同。

节流

节流函数在一定时间间隔内只允许函数执行一次，即使函数被多次触发。例如，我们可以使用节流函数来优化搜索框的输入事件。当用户在搜索框中输入时，节流函数会阻止函数的多次调用，只允许函数在用户停止输入后执行一次。这样可以减少不必要的函数调用，提高代码的性能。

防抖

防抖函数在一定时间间隔内只允许函数执行一次，但它会等到函数最后一次触发后才会执行。例如，我们可以使用防抖函数来优化按钮的点击事件。当用户连续点击按钮时，防抖函数会阻止函数的多次调用，只允许函数在用户停止点击后执行一次。这样可以防止用户误操作，提高代码的健壮性。

节流防抖的实现

在 JavaScript 中，我们可以使用以下两种方法来实现节流和防抖：

setTimeout

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

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

requestAnimationFrame

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

function debounce(func, delay) {
  let requestId = null;
  return function (...args) {
    cancelAnimationFrame(requestId);
    requestId = requestAnimationFrame(() => {
      func.apply(this, args);
    });
  };
}