防抖与节流如何实现，区别是什么？

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《防抖与节流怎么实现，区别在哪？》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

防抖函数关键在每次触发清除前次定时器并重设，节流函数关键在用时间戳或开关控制执行频率；二者均需保持this和参数透传，实际使用要注意事件移除、React/Vue绑定陷阱及竞态问题。

防抖函数怎么写？关键在“重置定时器”

防抖的核心逻辑是：每次触发都清除上一次的延时，重新计时。适用于搜索框输入、窗口大小调整等“只关心最终结果”的场景。

• 必须用 clearTimeout 清除前序定时器，否则会累积执行
• 定时器 ID 要存在闭包变量里，不能每次调用都新建一个未被引用的定时器
• 建议支持立即执行模式（immediate 参数），即首次触发立刻执行，后续触发才防抖

function debounce(fn, delay, immediate = false) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    if (immediate && !timer) {
      fn.apply(this, args);
    }
    timer = setTimeout(() => {
      if (!immediate) fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

注意：fn.apply(this, args) 保证了原始上下文和参数透传，漏掉这点会导致 this 指向丢失或参数截断。

节流函数怎么写？关键是“开关控制”或“时间戳比对”

节流的目标是固定频率执行，比如滚动事件中每 100ms 最多执行一次。有两种主流实现方式：

• 定时器版：用布尔开关控制是否允许注册下一次定时器
• 时间戳版：记录上次执行时间，当前时间减去它，大于间隔才执行

时间戳版更精准（无延迟累积），但无法保证首次立即执行；定时器版首次可立即执行，但可能因延迟导致两次执行间隔略大于设定值。

// 时间戳版（推荐）
function throttle(fn, limit) {
  let last = 0;
  return function(...args) {
    const now = Date.now();
    if (now - last >= limit) {
      fn.apply(this, args);
      last = now;
    }
  };
}

使用时注意：limit 过小（如 10ms）在低性能设备上可能几乎不执行，建议根据场景设为 50–16ms（对应 20–60fps）。

防抖和节流在实际事件绑定中容易踩哪些坑？

• 直接把防抖/节流函数赋给 addEventListener 后，无法用 removeEventListener 移除——因为每次调用返回的是新函数。解决办法：把防抖/节流后的函数缓存为变量再传入。
• 在 React 函数组件中，useCallback 包裹防抖函数时，若依赖项变化，会生成新函数，导致防抖失效或重复绑定。应把防抖函数定义在 useRef 或 useMemo 中稳定引用。
• Vue 中使用 v-on:scroll.native 绑定节流函数时，若没用 .passive 修饰符，在 iOS 上可能卡顿，因为浏览器无法异步处理 passive 事件。

该选防抖还是节流？看数据更新意图

• 输入类操作（如搜索、表单校验）：优先防抖。用户还在敲字，你不需要每敲一下就发请求。
• 滚动/拖拽类操作（如懒加载、吸顶导航）：优先节流。需要持续感知位置变化，但不必每一帧都响应。
• 极端情况（如游戏手柄输入）：两者都不够，得结合 requestAnimationFrame 或 Web Worker 处理高频数据流。

防抖和节流本身不解决异步竞态问题。比如防抖后的搜索请求，后发的请求先返回，覆盖了先发但慢的响应——这得靠取消请求（AbortController）或响应比对来处理，不是节流防抖能覆盖的。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《防抖与节流如何实现，区别是什么？》文章吧，也可关注golang学习网公众号了解相关技术文章。