手写一个防抖

防抖是一种前端开发中常用的性能优化技术，特别是在处理用户输入或其他频繁触发的事件时。防抖的目的是通过延迟执行来合并连续的触发，以减少频繁操作对系统性能的影响。

手写防抖函数

function debounce(func, delay) {
   
  let timerId;

  return function (...args) {
   
    if (timerId) {
   
      clearTimeout(timerId);
    }

    timerId = setTimeout(() => {
   
      func.apply(this, args);
    }, delay);
  };
}

// 示例用法
const debouncedFunction = debounce(() => {
   
  console.log("防抖触发了！");
}, 300);

// 在事件处理中使用
document.getElementById("myInput").addEventListener("input", debouncedFunction);

防抖的原理

防抖的原理很简单：当事件被触发时，不立即执行处理函数，而是设置一个定时器，在指定的延迟时间后再执行。如果在这个延迟时间内事件再次触发，就清除之前的定时器，重新设置一个新的定时器。这样，只有在事件停止触发一段时间后，处理函数才会被执行。

为什么需要防抖？

1. 性能优化： 频繁触发的事件，如输入框输入、窗口大小变化等，可能导致大量的计算和DOM操作。通过防抖，可以减少不必要的操作，提高性能。

2. 减少请求： 在处理输入框输入时，如果每次输入都发送请求，可能会导致不必要的网络请求。通过防抖，可以确保用户停止输入一段时间后再发送请求，减轻服务器负担。

3. 避免重复操作： 防抖还可以防止重复操作，特别是一些需要用户交互的操作，如点击按钮触发的事件。

如何使用防抖？

1. 导入防抖函数： 将防抖函数引入你的项目中。

2. 创建防抖实例： 使用防抖函数创建一个防抖实例，传入需要防抖的处理函数和延迟时间。

3. 事件绑定： 在需要应用防抖的地方，将防抖实例作为事件处理函数绑定。

const debouncedFunction = debounce(() => {
   
  console.log("防抖触发了！");
}, 300);

document.getElementById("myInput").addEventListener("input", debouncedFunction);

通过上述步骤，你就成功地在项目中应用了防抖技术，优化了性能并提升了用户体验。在实际项目中，可以根据需要调整延迟时间，以平衡性能和响应速度。