前端与全栈开发面试 · 第 63 题

防抖:

function debounce(fn, wait) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), wait);
  };
}

每次触发都清掉上一次的定时器,只有停止触发超过 wait 毫秒才执行。适合搜索联想、窗口 resize 结束后再计算、表单校验。

节流(时间戳版):

function throttle(fn, wait) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= wait) {
      last = now;
      fn.apply(this, args);
    }
  };
}

wait 毫秒内最多执行一次。适合滚动监听、拖拽、鼠标移动、按钮防连点。

要点:用 apply 保留 this 和参数;可以扩展 leading / trailing 选项(首次是否立即执行、最后一次是否补执行)以及 cancel 方法;在 React 中要用 useMemo 或 useRef 保持同一个防抖函数实例,否则每次渲染都会生成新函数,防抖失效。

能写出代码并说清楚两者的区别和场景即可。