在前端中，以下事件可能被高频触发：
- 窗口事件：
resize、scroll（窗口大小改变、滚动时每秒触发数十次）
- 输入事件：
input、keyup（用户快速打字时每秒触发多次）
- 交互事件：
click、mousemove（快速点击、鼠标滑动时高频触发）
若直接在事件回调中执行复杂操作（如渲染列表、发送请求），会导致：
- 浏览器主线程阻塞，页面卡顿
- 无效请求 / 操作过多，浪费资源（如用户连续输入时，无需每次输入都发请求）
防抖和节流通过限制函数执行频率解决上述问题，但策略不同。
事件触发后，延迟 N 秒执行回调；若 N 秒内再次触发事件，则重新计时（覆盖之前的延迟），直到最后一次触发后等待 N 秒，才执行一次回调。
简单说：“等用户‘停手’后再执行，中间的频繁操作都不算”。
触发事件后，不立即执行，等待 N 秒后执行；若期间再次触发，重新计时。
触发事件后立即执行一次，之后 N 秒内再次触发不执行；N 秒后触发，重复此逻辑。
- 搜索框输入联想：用户连续打字时，无需每次输入都发请求，等停止输入后 100-300ms 再请求（非立即版）。
- 按钮防重复提交：点击按钮后立即执行一次，1 秒内再次点击无效（立即版）。
- 表单验证：输入框内容变化时，等用户暂停输入后再验证格式。
事件触发后，立即执行一次回调，然后在接下来的 N 秒内，无论事件触发多少次，都不再执行；N 秒后再次触发事件，重复此逻辑。
简单说：“不管触发多频繁，每隔 N 秒只执行一次”。
通过记录上次执行时间，每次触发时判断当前时间与上次执行时间的间隔是否超过 N 秒，超过则执行。
特点：首次触发立即执行，最后一次触发若未到间隔则不执行。
通过定时器保证每隔 N 秒执行一次，若触发时已有定时器，则等待定时器执行后再重置。
特点：首次触发延迟 N 秒执行，最后一次触发会确保执行。
- 滚动加载：监听
scroll事件，每隔 200ms 判断一次是否滚动到页面底部（避免高频计算）。
- 窗口 resize：调整窗口大小时，每隔 100ms 重新计算布局（减少 DOM 重绘）。
- 高频点击：如游戏中的 “射击” 按钮，限制每秒最多触发 5 次（避免过度触发）。
-
优先使用成熟库：lodash 提供了 _.debounce 和 _.throttle 函数，处理了 this 指向、参数传递、立即执行等细节，推荐直接使用。
-
自定义实现注意点：
- 保留
this 指向（使用 apply/call）。
- 传递事件参数（如
event 对象）。
- 支持取消功能（如手动清除定时器）。
-
合理设置延迟 / 间隔：
- 防抖延迟：输入类事件建议 100-300ms，按钮防重复提交建议 1000ms。
- 节流间隔：滚动 /resize 建议 100-200ms，高频交互建议 50-100ms。
防抖和节流是前端性能优化的基础手段，核心是通过限制函数执行频率，减少无效操作。记住：
- 防抖适合 “等待用户停止操作后执行一次” 的场景；
- 节流适合 “需要均匀执行，控制频率” 的场景。根据具体业务选择合适的方案，可显著提升页面流畅度和资源利用率。
