鼠标移动事件必须节流而非防抖，因拖拽、画线等依赖连续坐标流；推荐时间戳版节流函数，首帧立即执行，支持状态感知与智能频率调整。

鼠标移动事件（mousemove）在 JS 项目中极易高频触发——正常操作下每秒可达 60–100 次，直接执行 DOM 更新、坐标计算或手势识别逻辑，会迅速拖慢页面、卡顿渲染。节流不是“可选优化”，而是必须手段：它确保函数按固定间隔执行，既保留运动连续性，又避免资源过载。

为什么必须用节流，而不是防抖

防抖只响应“最后停下的那一刻”，会丢掉全部中间轨迹。而鼠标移动的关键是过程：拖拽、画线、地图平移、手势识别都依赖连续坐标流。节流能稳定采样，生成可用的运动序列。

• 手势识别（如划圈、甩动）需每 10–32ms 记录一次位置+时间戳+按键状态
• 普通 UI 跟随（如 tooltip 追踪鼠标）用 40–60ms 已足够平滑
• 防抖在此场景下等于“不识别”，节流才是保过程、控节奏的正解

推荐用时间戳版，首帧立即响应

定时器版（setTimeout）有延迟启动问题：第一次触发要等满 delay 才执行，用户刚移动鼠标就无反馈，体验割裂。时间戳版用 Date.now()比对，首次调用立刻执行，后续严格按间隔放行。

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

示例实现：

function throttle(fn, limit = 32) {
  let last = 0;
  return function(...args) {
    const now = Date.now();
    if (now - last >= limit) {
      fn.apply(this, args);
      last = now;
    }
  };
}

• limit = 32 对应约 31fps，兼顾流畅与性能，适合多数 UI 跟随
• ...args 确保事件对象（event）完整传递，避免丢失 clientX/clientY 等关键属性
• fn.apply(this, args) 正确绑定原事件回调中的 this（如监听元素）

结合上下文做智能节流

真实项目里不能只看时间间隔。鼠标行为有状态：是否按下、是否按住 Shift、位移是否超过阈值……这些决定要不要采样、以多高频率采样。

• 仅当 event.buttons === 1（左键按下）且 isDragging 为 true 时才启用节流
• 检测到连续三帧 movementX > 3px，自动切到 16ms 高频模式，捕捉快速甩动
• 若 event.ctrlKey 为 true，放宽至 50ms，避免缩放操作时坐标抖动干扰
• 避免在 passive: true 的监听器中使用——它会让 event 只读，无法获取必要属性

绑定时注意 this 和事件对象

直接写 element.addEventListener('mousemove', throttle(handleMove, 50)) 是安全的，但若手动传参或嵌套，容易出错：

• 错误写法：throttle(() => handleMove(event), 50) —— event 作用域失效，每次都是上一次的旧值
• 正确写法：让节流函数接收完整参数，由内部 apply 分发；或用箭头函数包一层并透传：e => throttleFn(e)
• 如果 handler 依赖 this 指向目标元素，节流后必须显式绑定，否则 this 会变成 window 或 undefined