揭开手撕-防抖函数的奥秘

手撕-防抖函数，顾名思义，就是用纯正的 JavaScript 代码实现防抖功能，不借助任何第三方库。防抖，是一种优化用户体验、降低性能开销的技术，通过限制函数在指定时间内最多执行一次，来避免因用户快速重复操作而造成的性能问题。

在日常开发中，我们经常会遇到需要防抖的场景。例如：

• 搜索框：当用户输入时，我们不希望每次按键都触发搜索请求，而应该在用户停止输入后才进行搜索。
• 滚动加载：当用户滚动页面时，我们不希望每次滚动都触发加载更多数据的请求，而应该在用户停止滚动后才加载更多数据。
• 按钮点击：当用户快速点击按钮时，我们不希望每次点击都触发按钮的点击事件，而应该在用户停止点击后才触发点击事件。

手撕防抖函数的实现原理很简单，就是利用 JavaScript 的计时器函数 setTimeout 和 clearTimeout。在事件触发时，我们首先使用 setTimeout 设置一个延时器，如果在延时时间内事件再次触发，我们就使用 clearTimeout 清除之前的延时器，并重新设置一个新的延时器。这样，我们就确保了事件在指定时间内最多只执行一次。

下面，我们一步一步来实现一个手撕防抖函数：

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

这个函数接受两个参数：要防抖的函数 fn 和延时时间 delay。当调用这个函数时，它会返回一个新的函数，这个新的函数可以像调用 fn 一样被调用，但是它会在调用 fn 之前先进行防抖处理。

为了更好地理解手撕防抖函数的用法，我们来看一个例子：

const input = document.querySelector('input');
const search = debounce(() => {
  // 这里可以进行搜索操作
}, 500);

input.addEventListener('input', search);

在这个例子中，我们使用手撕防抖函数 debounce 来对输入框的 input 事件进行防抖处理。当用户输入时，input 事件会被触发，但是 search 函数只会在用户停止输入 500 毫秒后才会执行，这样可以避免因用户快速输入而造成的性能问题。

手撕防抖函数的实现很简单，但是它却是一个非常有用的工具，可以帮助我们优化用户体验、降低性能开销。在日常开发中，我们可以灵活地使用手撕防抖函数来解决各种各样的防抖问题。