JavaScript 中事件机制怎么实现防抖与节流优化-js教程-PHP中文网

javascript事件机制本身不直接提供防抖与节流功能，而是通过在事件监听器中包裹自定义控制逻辑来实现优化，本质是利用事件回调的可编程性，结合定时器或时间戳主动干预函数执行节奏。

javascript 中事件机制怎么实现防抖与节流优化

JavaScript 中事件机制本身不直接提供防抖与节流功能，而是通过在事件监听器中包裹自定义控制逻辑来实现优化。本质是利用事件回调的可编程性，结合定时器（setTimeout/clearTimeout）或时间戳（Date.now()）等机制，主动干预函数执行节奏。

以下从实现逻辑、关键要素和典型写法三方面说明：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

防抖依赖事件触发的“重置计时”逻辑

防抖适用于需要“等待操作稳定后才响应”的场景，比如输入搜索、窗口 resize。
核心做法：

每次事件触发时，清除上一个待执行的定时器
重新设置一个新定时器，延迟执行目标函数
若延迟期内再次触发，就不断重置，直到静默期结束

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
// 使用示例
input.addEventListener('input', debounce(search, 300));

节流依赖“固定周期内最多执行一次”的约束

节流适用于需持续反馈但不能过载的场景，比如滚动加载、鼠标移动追踪。
核心做法：

记录上一次执行的时间戳
每次触发时比对当前时间与上次执行时间差
达到间隔才允许执行，并更新时间戳

function throttle(fn, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}
// 使用示例
window.addEventListener('scroll', throttle(loadMore, 100));