节流是限制高频事件（如mousemove）执行频率的优化手段，确保函数在指定间隔内最多执行一次；通过时间戳判断是否过期，过期则执行并更新时间戳，未过期则跳过。
节流（Throttle）是解决鼠标移动（mousemove）事件高频触发导致性能问题的常用手段。它能保证函数在指定时间间隔内最多执行一次，既保留“实时感”，又避免过度计算或渲染。
节流的核心逻辑：固定间隔只响应第一次触发
与防抖（Debounce）不同，节流不等待停止再执行，而是在连续触发中“匀速放行”。例如设为 16ms（约 60fps），那么无论鼠标多快移动，坐标更新最多每秒 60 次，足够人眼感知流畅，又不会压垮主线程。
关键点：
- 用一个标志位（如
isThrottled）或时间戳记录上次执行时间 - 每次触发时，先判断是否已过间隔；未到则跳过，到了则执行并重置计时
- 推荐使用时间戳方式，更精准、无闭包依赖、易于理解
手写节流函数（推荐时间戳版）
下面是一个轻量、无依赖的节流实现，专为 mousemove 场景优化：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
function throttle(func, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
};
}使用示例：
const handleMouseMove = throttle((e) => {
console.log(`x: ${e.clientX}, y: ${e.clientY}`);
// 更新 DOM、Canvas 坐标、发送 WebSocket 等
}, 16); // ≈ 60fps
<p>document.addEventListener('mousemove', handleMouseMove);配合 requestAnimationFrame 实现更顺滑的视觉同步
如果目标是 UI 渲染（如拖拽元素、画布跟随），单纯节流 + setTimeout 仍可能丢帧。此时可将坐标采集和渲染解耦：
- 用节流快速采集最新坐标（如 60–100ms 间隔），存入变量
- 用
requestAnimationFrame在下一帧统一读取并渲染，确保与屏幕刷新率对齐
示例：
let latestX = 0, latestY = 0;
<p>const capture = throttle((e) => {
latestX = e.clientX;
latestY = e.clientY;
}, 80); // 宽松采集，减少开销</p><p>function render() {
// 此处用 latestX/latestY 更新视图
element.style.left = <code>${latestX}px</code>;
element.style.top = <code>${latestY}px</code>;
}</p><p>document.addEventListener('mousemove', capture);
requestAnimationFrame(() => {
render();
requestAnimationFrame(render); // 持续动画循环
});注意事项与常见坑
实际使用中需注意：
- 不要在节流函数里直接操作大量 DOM 或复杂计算——应只做必要采集，重逻辑移至渲染阶段
-
解除监听时记得清除引用，尤其用箭头函数或绑定
this时，避免内存泄漏 - 移动端需同时监听
touchmove，且注意touches[0]取坐标 - 若需精确坐标（如 canvas 绘图），记得减去容器偏移：
e.clientX - canvas.getBoundingClientRect().left
