前端面试题

防抖与节流:什么时候用哪个

防抖和节流有什么区别?手写一下。

为什么面试官会问这道题

代码轮必考。看你闭包用得溜不溜,也考"最后一次为准"vs"限流"的UX取舍。

如何回答

  1. 1

    防抖:最后一次调用N ms后才执行。调用不停就永远不执行。场景:输入搜索(用户停下才查)、resize结束。

  2. 2

    节流:每N ms最多执行一次。首次立即或间隔末,按变种定。场景:scroll监听、mousemove、限速轮询。

  3. 3

    防抖实现:闭包存timerId,每次调用清旧的设新的。

  4. 4

    节流实现:闭包存lastCallTime,now-last>=interval才执行。

  5. 5

    边角:leading/trailing、cancel方法(清理)、防抖maxWait(至少每max ms跑一次)。

参考回答示例

防抖是"等安静",节流是"限速率"。搜索框我防抖300ms——用户停下才发请求。滚动动画或粘顶逻辑我节流16ms(约60fps)——手势期间要持续更新,不能沉默。Lodash有现成的,但自己写也就10行闭包:防抖存timerId每次重置,节流存lastTime判断时间够了才执行。常见选项:`leading`(先执行再冷却)、`trailing`(末尾执行)、防抖的`maxWait`(别推迟太久)。

实用技巧

  • requestAnimationFrame比setTimeout更适合"节流到帧率"——跟渲染周期同步。

  • React里用useRef存timer跨渲染;别每次render都重新造debounce函数。

  • 即答侠把两种实现背熟——白板上不会在闭包上卡壳。

常见问题

防抖会漏掉最后一次吗?

组件卸载时timer还没触发就会。返回一个cancel方法、cleanup里调,避免stale update。

RxJS对应什么?

debounceTime和throttleTime操作符,语义和lodash一样。

面试时担心忘词?即答侠实时助你

即答侠 AI 实时监听面试对话,自动识别问题并即时生成回答建议——无感辅助,让你从容应对每一道题。

免费试用即答侠