前端面试中JavaScript函数防抖和节流相关问题有哪些？

JavaScript函数防抖与节流常见问题解析

在前端开发面试中，JavaScript 性能优化相关的问题一直是考察重点，而函数防抖（debounce）和节流（throttle）更是高频考点，这两项技术用于控制高频触发事件的执行频率，从而提升页面性能与用户体验，本文将总结前端面试中关于防抖与节流的常见问题及其核心解答,帮助你轻松应对技术面试。

防抖与节流的基本概念是什么？

防抖（debounce）：
防抖的核心思路是，在事件被频繁触发时，仅在触发操作停止后的指定时间间隔后执行一次回调函数，典型应用场景包括搜索框输入联想、窗口大小调整后的重新布局等，防抖是“等你操作完，我再行动”。

节流（throttle）：
节流则是规定一个单位时间间隔，在这个间隔内，无论事件被触发多少次，回调函数只会执行一次，常见于滚动事件、高频点击按钮的防重复提交等场景，可以理解为“按固定节奏执行，不抢拍”。

面试常见问题及解答

防抖和节流有什么区别？
- 触发机制：防抖关注的是“停止触发后的延迟执行”，而节流强调“固定时间间隔内的有限执行”。
- 适用场景：防抖适合最终状态或结果更新（如输入框联想搜索），节流适合持续触发但需要限制频率的事件（如页面滚动加载）。
- 实现方式：防抖通常利用定时器延迟执行，并在触发时清除之前的定时器；节流则通过记录上一次执行时间,判断是否到达间隔阈值来决定是否执行。

如何实现一个防抖函数？
防抖函数的核心代码示例如下：

function debounce(func, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer); // 清除之前的定时器
    timer = setTimeout(() => {
      func.apply(this, args); // 延迟执行原函数
    }, delay);
  };
}

关键点：利用闭包保存定时器变量,确保每次触发时都能清除前一次的定时任务。

如何实现一个节流函数？
节流函数的常见实现方式有两种：时间戳法和定时器法,以下是时间戳法的示例：

function throttle(func, limit) {
  let lastExecTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastExecTime >= limit) {
      func.apply(this, args); // 到达间隔时间后执行
      lastExecTime = now; // 更新最后执行时间
    }
  };
}

关键点：通过记录上一次执行时间,判断当前时间与上次执行时间的差值是否超过设定阈值。

防抖和节流可以结合使用吗？
可以，在需要同时处理“触发结束后的响应”和“限制高频触发”的场景中，可以先对事件进行节流，再在节流后的回调中应用防抖逻辑（或反之）,具体需根据业务需求调整。
实际应用中，如何选择防抖还是节流？
- 如果事件触发频率极高，且你只关心最终结果，选择防抖。
- 如果事件需要持续响应，但需避免过于频繁的执行，选择节流。
- 表单输入验证（防抖）、动画帧更新（节流）。