防抖：前端面试中的必备 JS 技巧

在竞争激烈的前端面试中，扎实的 JavaScript 基础知识至关重要。防抖就是一项经常被询问的基本技巧，掌握它可以为你的面试增添优势。

防抖是一种技术，用于限制函数在一定时间间隔内执行的频率。这在处理快速重复的事件（例如输入时自动完成建议）时特别有用，因为这样做可以防止不必要的计算和 DOM 操作。

为了理解防抖的工作原理，我们先来看一个简单的示例。假设我们有一个函数 handleInput，每当用户键入字符时都会调用它。如果不进行防抖，每次击键都会触发函数调用，这可能会导致性能问题。

通过实施防抖，我们可以将函数调用限制为一定的时间间隔，例如 300 毫秒。这样，即使用户在短时间内连续输入多个字符，函数也只会在最后一次击键后 300 毫秒执行一次。

实现防抖的常见方法是使用 setTimeout 函数。以下是使用此方法实现防抖的示例代码：

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

此函数接受两个参数：要防抖的函数 func 和等待时间 wait（以毫秒为单位）。当函数被调用时，它首先清除任何现有的超时（以防函数被多次调用）。然后，它安排一个新的超时，在 wait 毫秒后执行函数。

要使用防抖函数，只需将它作为另一个函数的参数传递即可。例如：

const handleInputDebounced = debounce(handleInput, 300);

现在，每次调用 handleInputDebounced 时，实际的 handleInput 函数只会在最后一次调用后 300 毫秒执行一次。

除了 setTimeout，实现防抖的另一种流行方法是使用 requestAnimationFrame 函数。这种方法在动画密集的应用程序中特别有用，因为它可以与浏览器渲染周期同步。

以下是如何使用 requestAnimationFrame 实现防抖的示例代码：

function debounce(func, wait) {
  let requestId;
  return (...args) => {
    cancelAnimationFrame(requestId);
    requestId = requestAnimationFrame(() => {
      func.apply(this, args);
    });
  };
}

在前端面试中展示对防抖的理解可以给面试官留下深刻的印象，表明你对 JavaScript 基础知识的深入了解。通过练习实现和使用防抖，你可以提高你的面试表现，增加获得理想工作的几率。