17370845950

防抖是事件停止触发后延迟执行一次，适合搜索输入、窗口缩放；节流是固定间隔执行，适合滚动加载、拖拽更新；选择依据是“等停手再响应”用防抖，“持续但限频”用节流。

防抖和节流是处理高频事件（比如 input、scroll、resize、mousemove）时常用的两种函数控制策略，核心目标是减少不必要的函数执行次数，从而节省计算资源、降低服务器压力、避免 UI 卡顿或重复提交等问题。

防抖（Debounce）：等“静下来”再行动

防抖的逻辑是：每次事件触发，都重置一个倒计时；只有当事件停止触发、且倒计时走完，函数才执行一次。就像电梯关门——只要有人进出，就重新计时，直到没人动了，才关门运行。

• 适合场景：用户输入搜索、表单实时校验、窗口缩放后重排布局
• 关键特点：只响应最后一次操作，中间所有触发都被忽略
• 简单实现要点：用 setTimeout + clearTimeout 管理定时器，每次调用前先清除旧定时器

节流（Throttle）：固定节奏，稳住频率

节流的逻辑是：无论事件多频繁，函数最多每隔固定时间执行一次。就像公交发车——到点就走，不管上车人数多少、是否还有人跑来，下趟车要等下个整点。

• 适合场景：滚动加载更多、拖拽位置更新、鼠标移动距离计算、Canvas 绘图
• 关键特点：保证执行有节奏，不堆积也不遗漏太远，通常首次触发立即执行
• 简单实现要点：可用时间戳比对（如 Date.now()）或开关标记（inThrottle）控制执行时机

怎么选？看你的需求节奏

如果希望“等用户彻底停手再响应”，选防抖；如果希望“持续响应但别太密”，选节流。

• 搜索框输入建议 → 防抖（避免边打字边请求）
• 滚动到底部加载新内容 → 节流（防止快速滚动时反复触发加载）
• 调整浏览器窗口大小 → 防抖（只需最终尺寸，不用中间过程）
• 鼠标拖拽元素 → 节流（需持续更新位置，但不必每像素都算）

小提醒：别漏掉 this 和参数绑定

手写时容易忽略上下文丢失问题。实际使用中，推荐在返回函数里用 func.apply(this, arguments) 或更现代的 func.call(this, ...args) 保证原函数能正确访问 this 和传入参数。也可以配合 bind 或箭头函数进一步封装，但要注意闭包与内存释放。