掌握debounce（防抖）方法，成为手写面试题中的佼佼者！

2023-01-02 20:51:41

手把手教你实现前端防抖方法：告别频繁操作！

什么是防抖（debounce）？

在前端开发中，我们经常会遇到需要防止某个函数在短时间内被重复调用的情况。这可以通过防抖（debounce）技术来实现。防抖的作用就好比一个闸门，它可以阻止函数在指定时间内被多次触发。

如何实现防抖？

实现防抖的方法很简单，下面是一个通用的 JavaScript 函数：

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

这个函数接收两个参数：fn 是需要防抖的函数，delay 是防抖延迟时间，单位是毫秒。

工作原理

创建计时器： 当我们调用防抖函数时，会创建一个计时器 timerId。
重置计时器： 如果我们再次调用防抖函数，且计时器 timerId 已存在，说明上一次函数调用还没完成，我们先清除这个计时器。
延迟执行： 如果没有计时器，说明上一次函数调用已完成，我们设置一个新的计时器，延迟 delay 毫秒后执行原函数 fn。

代码示例

下面是一个使用防抖函数的示例：

// 定义一个函数，用于打印 "Hello World!"
const sayHello = () => {
  console.log("Hello World!");
};

// 将 sayHello 函数进行防抖，防抖延迟时间为 500 毫秒
const debouncedSayHello = debounce(sayHello, 500);

// 每点击一次按钮，就调用防抖后的函数
document.addEventListener("click", debouncedSayHello);