揭开JS防抖的神秘面纱：手把手教你从零实现

前端

2023-09-13 08:34:31

JS防抖技术是一种控制函数执行频率的方法，在频繁触发的事件（比如滚动、输入）下尤为有用。它的主要作用是确保在一定时间间隔内仅执行一次特定的操作。这种技术可以显著减少不必要的重复计算或网络请求，进而提升性能和用户体验。

防抖的应用场景

防抖技术常见于以下几种应用场景：

用户在搜索框输入文字时，避免每次按键都触发后台查询。
页面滚动事件，防止频繁加载数据。
窗口大小调整时，重置布局或重新计算元素尺寸。

这些情况下，使用防抖可以有效减少不必要的操作次数，提升应用程序的性能和用户体验。

手把手教你实现防抖方法

步骤一：定义防抖函数

首先，需要定义一个基础的防抖函数。这个函数接受另一个函数作为参数，并返回一个新的函数。新函数会在延迟一定时间后执行传入的函数，如果在这段时间内该函数被再次调用，则重置计时器。

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

步骤二：应用防抖函数

在定义好防抖函数后，可以将其应用于需要的地方。例如，在处理窗口大小调整事件时：

function handleResize() {
  console.log('Window resized');
}

window.addEventListener('resize', debounce(handleResize, 200));

以上代码中，handleResize 函数只有在用户停止调整窗口尺寸至少200毫秒后才会执行。这样可以避免频繁触发，提高性能。

步骤三：考虑边界情况

尽管上述实现适用于大多数场景，但在某些情况下可能需要额外的处理，比如页面加载时首次调用函数的需求：

function debounceImmediate(func, wait) {
  let timeout;
  return function(...args) {
    if (!timeout) func.apply(this, args);
    clearTimeout(timeout);
    timeout = setTimeout(() => { timeout = null }, wait);
  };
}

上述代码中，debounceImmediate 函数会在首次调用时立即执行，并在后续等待指定时间后才再次执行。