JavaScript如何实现防抖和节流_它们分别适用于什么场景-js教程-PHP中文网

JavaScript如何实现防抖和节流_它们分别适用于什么场景

夜晨

发布： 2025-12-24 11:21:07

原创

103人浏览过

防抖是“等你停手再执行”，节流是“固定节奏执行”；防抖适用于搜索建议、表单校验等需操作结束后响应的场景，节流适用于滚动加载、resize适配等需持续但限频响应的场景。

javascript如何实现防抖和节流_它们分别适用于什么场景

防抖（Debounce）和节流（Throttle）是前端处理高频事件的两种经典策略，核心区别在于：防抖是“等你停手再执行”，节流是“固定节奏执行”。选错会导致交互卡顿或逻辑失效，比如搜索框输入、窗口缩放、滚动加载等场景，必须按需选用。

防抖：只响应最后一次操作

防抖函数会忽略前面所有触发，只在最后一次调用后等待指定延迟时间，若期间再次触发则重新计时。适合需要“用户操作结束才响应”的场景。

典型适用场景：实时搜索建议、表单输入校验、按钮重复点击防护
实现要点：每次调用先清除已有定时器，再新建一个；闭包保存 timer 引用

简单实现：

<code>function debounce(fn, delay) {<br>  let timer;<br>  return function(...args) {<br>    clearTimeout(timer);<br>    timer = setTimeout(() => fn.apply(this, args), delay);<br>  };<br>}</code>

登录后复制

节流：控制执行频率上限

节流保证函数在单位时间内最多执行一次，无论触发多少次。适合需要“持续响应但不能太密”的场景，比如滚动监听、鼠标移动追踪。

典型适用场景：无限滚动加载、canvas 绘图响应、resize 适配
实现要点：记录上次执行时间，每次触发时判断是否超过间隔；或用定时器“预约下一次执行”

时间戳版（推荐）：

<code>function throttle(fn, limit) {<br>  let lastTime = 0;<br>  return function(...args) {<br>    const now = Date.now();<br>    if (now - lastTime >= limit) {<br>      fn.apply(this, args);<br>      lastTime = now;<br>    }<br>  };<br>}</code>

登录后复制