当前位置：首页 > 文章列表 > 文章 > 前端 > 防抖与节流如何实现，区别是什么？

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

2026-02-07 17:09:42 0浏览收藏

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

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

javascript如何实现防抖和节流_它们有什么区别【教程】

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

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

必须用 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）。