详解underscore之防抖函数的奥秘

2023-10-11 23:51:00

掌握防抖函数背后的秘密：从初学者到高级应用

在Web开发的广阔世界中，我们经常需要限制函数的执行频率，防止连续的事件触发不必要的函数调用。这就是防抖函数发挥作用的地方。它通过引入延迟时间，在特定时间段内只允许函数执行一次。本文将深入探讨防抖函数，揭开其幕后的运作秘密，并分享从初级到高级的各种应用场景。

防抖函数初探

防抖函数最简单的形式接受两个参数：要执行的函数和延迟时间。当函数被调用时，它会启动一个计时器，在指定的时间段内运行。如果在计时器运行期间再次调用该函数，则会重置计时器，有效地防止函数在延迟时间内多次执行。

以下代码展示了防抖函数的基本实现：

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

保持上下文

有时，我们需要确保防抖函数在被调用时保持其上下文，即使用相同的this值。我们可以通过使用Function.prototype.bind()方法来实现这一点。

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

传递参数

在某些情况下，我们需要将参数传递给防抖函数。我们可以通过在返回的函数中使用箭头函数来实现这一点。

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

立即执行

为了在首次调用时立即执行防抖函数，我们可以使用立即执行函数（IIFE）：

function debounce(func, wait, immediate) {
  let timer;
  return function () {
    if (immediate && !timer) {
      func.apply(this, arguments);
    }
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, wait);
  };
}

返回值

如果需要，我们可以使用箭头函数从防抖函数中返回值：

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

取消执行

为了在防抖函数执行之前取消它，我们可以使用clearTimeout()方法：

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