防抖是事件停止触发后延迟执行一次，适合搜索输入、窗口缩放；节流是固定间隔执行，适合滚动加载、拖拽更新；选择依据是“等停手再响应”用防抖，“持续但限频”用节流。
防抖和节流是处理高频事件（比如 input、scroll、resize、mousemove）时常用的两种函数控制策略，核心目标是减少不必要的函数执行次数，从而节省计算资源、降低服务器压力、避免 UI 卡顿或重复提交等问题。
防抖（Debounce）：等“静下来”再行动
防抖的逻辑是：每次事件触发，都重置一个倒计时；只有当事件停止触发、且倒计时走完，函数才执行一次。就像电梯关门——只要有人进出，就重新计时，直到没人动了，才关门运行。
- 适合场景：用户输入搜索、表单实时校验、窗口缩放后重排布局
- 关键特点：只响应最后一次操作，中间所有触发都被忽略
- 简单实现要点：用
setTimeout+clearTimeout管理定时器，每次调用前先清除旧定时器
节流（Throttle）：固定节奏，稳住频率
节流的逻辑是：无论事件多频繁，函数最多每隔固定时间执行一次。就像公交发车——到点就走，不管上车人数多少、是否还有人跑来，下趟车要等下个整点。
- 适合场景：滚动加载更多、拖拽
位置更新、鼠标移动距离计算、Canvas 绘图 - 关键特点：保证执行有节奏，不堆积也不遗漏太远，通常首次触发立即执行
- 简单实现要点：可用时间戳比对（如
Date.now()）或开关标记（inThrottle）控制执行时机
位置更新、鼠标移动距离计算、Canvas 绘图怎么选？看你的需求节奏
如果希望“等用户彻底停手再响应”，选防抖；如果希望“持续响应但别太密”，选节流。
- 搜索框输入建议 → 防抖（避免边打字边请求）
- 滚动到底部加载新内容 → 节流（防止快速滚动时反复触发加载）
- 调整浏览器窗口大小 → 防抖（只需最终尺寸，不用中间过程）
- 鼠标拖拽元素 → 节流（需持续更新位置，但不必每像素都算）
小提醒：别漏掉 this 和参数绑定
手写时容易忽略上下文丢失问题。实际使用中，推荐在返回函数里用 func.apply(this, arguments) 或更现代的 func.call(this, ...args) 保证原函数能正确访问 this 和传入参数。也可以配合 bind 或箭头函数进一步封装，但要注意闭包与内存释放。
