JavaScript 中节流函数怎么使用定时器控制高频事件触发-js教程-PHP中文网

节流函数核心是在固定时间间隔内最多执行一次事件处理函数，常用定时器+状态标记实现，支持尾部执行、取消及头部执行等增强功能。

javascript 中节流函数怎么使用定时器控制高频事件触发

节流函数（Throttle）的核心思路是：在指定时间间隔内，只允许事件处理函数最多执行一次，其余调用被忽略或延迟到下个周期。用定时器实现时，常用“定时器+状态标记”配合，确保高频触发下稳定限频。

基本实现原理：定时器 + 闭包状态

关键在于维护一个 timer 变量和一个“是否正在等待执行”的状态。每次触发时，如果定时器未启动，就设置定时器；如果已存在定时器，则跳过本次执行，等定时器清空后才允许下一次尝试。

不使用防抖的“重置计时”逻辑，而是固定周期内只执行一次
通常采用“尾部执行”策略：即在每个周期结束时执行最后一次有效调用（也可选头部执行，即周期开始时立即执行一次）
闭包保存 timer 和上一次参数，保证上下文不丢失

常见写法：尾部节流（推荐）

这是最常用的节流方式，适合滚动、鼠标移动等场景，避免频繁计算但又不丢失最终状态：

function throttle(func, delay) {
  let timer = null;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

使用示例：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

window.addEventListener('scroll', throttle(() => {
  console.log('滚动节流执行');
}, 100));

说明：连续滚动时，每 100ms 最多执行一次，且执行的是该周期内最后一次触发时的调用。

支持取消与立即执行的增强版

实际项目中常需手动清理定时器（如组件卸载时），或希望首次触发立刻执行（头部节流）：

添加 cancel 方法清除待执行任务
通过 leading 参数控制是否首次立即执行
通过 trailing 控制是否在周期末尾补一次执行

简化版带 cancel 支持：

function throttle(func, delay) {
  let timer = null;
  const throttled = function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  };
  throttled.cancel = () => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
  };
  return throttled;
}