【手撕代码系列】JS手写实现防抖函数

公众号：Code程序人生，分享互联网所见所闻

防抖是一种前端常见的性能优化技术，可以避免在高频触发的情况下频繁地执行函数，从而减少资源的消耗。本文将介绍如何手写实现一个防抖函数。

防抖的原理

防抖的原理是当事件被触发后，计时器会被重置。如果在指定的时间内，同一事件被再次触发，则计时器重新计时，直到计时器结束，函数才会被执行。这样可以避免因高频触发事件而导致频繁执行函数，从而减少资源的消耗。

手写实现防抖函数

下面是一个简单的防抖函数的实现：

function debounce(fn, delay) {
  let timer = null;

  return function (...args) {
    if (timer) clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

这个函数接受两个参数：需要执行的函数和防抖的延迟时间。它返回一个新函数，每次调用该新函数时，它会在指定的延迟时间内执行一次原始函数。如果在这段时间内再次调用该函数，则重置计时器，并在延迟时间结束后再次执行原始函数。
让我们来看一下这个函数是如何工作的。假设有一个需要防抖的按钮点击事件：

const button = document.querySelector('button');

function handleClick() {
  console.log('Button clicked!');
}

button.addEventListener('click', debounce(handleClick, 1000));

在这个例子中，我们为按钮的点击事件绑定了一个防抖函数。每当按钮被点击时，防抖函数将在1000毫秒内只执行一次原始函数。如果在这段时间内再次点击按钮，则重置计时器，并在1000毫秒后再次执行原始函数。

拓展

上面我们实现的防抖函数，是一个很常规、基础版的实现，在有些面试中，可能基于各种场景来做，我遇到比较多的就是，让第一次触发正常执行，之后的触发再进行防抖。

下面我们实现一下：

function debouncePlus(fn, delay) {
  let timer = null;
  let first = true;

  return function (...args) {
    if (timer) clearTimeout(timer);
    if (first) {
	  fn.apply(this, args);
	  first = false;
	} else {
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
	}
  };
}

其实也很简单，人为设定一个常量来判断下是否是第一次执行就可以，如果是第一次，就立刻执行传入的函数，如果不是，再走防抖的机制。

总结

防抖函数是一种简单而强大的性能优化技术，可以避免在高频触发的情况下频繁地执行函数，从而减少资源的消耗。通过手写实现防抖函数，我们可以更好地理解防抖的原理和实现方式，并在实际开发中应用这种技术来提高程序的性能。