王者荣耀里的 JS 节流与防抖：回城读条 VS 技能 CD

写博客最怕啥？读者看完第一句就关掉。今天咱们用峡谷日常把“节流”和“防抖”讲成段子，保准你女朋友听完都能秒懂。

回城读条：防抖（Debounce）

想象你是个残血鲁班，准备 B 键回城。回城条一共 8 秒，规则是： 只要中途挨了一下打，进度条就归零，重新读 8 秒。 这就是防抖：事件连续触发时，只认最后一次，前面的全部作废。

对应到代码：搜索框输入、窗口 resize、按钮连点……用户疯狂敲键盘，我们只等他停手 300 ms 再发请求，省得服务器被“哒哒哒”打成筛子。

防抖小栗子

// 回城防抖版
function debounce(fn, delay = 800) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);          // 挨揍就清零
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
// 使用：搜索框
const search = debounce(q => console.log('搜索：', q), 300);
document.querySelector('#search').addEventListener('input', e => search(e.target.value));

技能 CD：节流（Throttle）

再来看妲己的 2 技能，CD 5 秒。不管你手速多快，5 秒内只能放一次，时间一到立刻能再甩爱心。 这就是节流：固定时间窗口内，最多执行一次，保证节奏稳定。

对应到代码：滚动加载、鼠标移动、游戏帧率控制……不管用户怎么滚，我们每 200 ms 计算一次位置，既跟手又不卡。 王者荣耀妲己二技能 王者荣耀妲己二技能

节流小栗子

// 技能节流版
function throttle(fn, delay = 1000) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= delay) {
      last = now;
      fn.apply(this, args);
    }
  };
}

// 使用：滚动监听
const scrollHandler = throttle(() => console.log('滚动中...'), 200);
window.addEventListener('scroll', scrollHandler);

一张表看懂区别

实战：别重复造轮子

自己写容易翻车，直接上成熟库： npm 一行搞定

npm i throttle-debounce 或者 npm i lodash

开箱即用 import { debounce, throttle } from 'throttle-debounce';

// 防抖搜索 const search = debounce(300, q => console.log('搜索：', q));

// 节流滚动 const onScroll = throttle(200, () => console.log('滚动中...'));

记住口诀： “回城怕打断，防抖等最后；技能有 CD，节流稳节奏。” 下次面试官再问，你就把鲁班和妲己搬出来，稳了！