节流函数通过限制 mousemove 事件执行频次来提升性能，核心是记录上一次执行时间并判断间隔是否达标，确保单位时间内至少执行一次，适用于需持续响应的鼠标移动场景。
节流函数在鼠标移动监听中生效，核心是控制 mousemove 事件的触发频率，避免高频回调导致性能问题。它不是“阻止”事件，而是在指定时间间隔内只执行一次处理逻辑。
为什么鼠标移动需要节流
用户快速拖动鼠标时，mousemove 每秒可能触发数十甚至上百次。若每次触发都执行计算、DOM 更新或 API 调用（如实时坐标显示、画布绘制、拖拽位置更新），极易造成页面卡顿或资源浪费。节流通过限制执行频次，在响应及时性和性能之间取得平衡。
手写一个基础节流函数
关键逻辑：记录上一次执行时间，每次触发前判断是否已过设定间隔；未到间隔则跳过，到了则执行并更新时间戳。
示例代码：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
function throttle(func, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
};
}
<p>// 使用示例
const handleMove = throttle((e) => {
console.log('X:', e.clientX, 'Y:', e.clientY);
}, 100); // 每 100ms 最多执行一次</p><p>document.addEventListener('mousemove', handleMove);
注意实际使用中的细节
-
闭包保持状态：节流函数必须返回新函数，且内部维护
lastTime，否则每次调用都是独立计时，失去节流意义。 -
绑定 this 和参数：用
func.apply(this, args)确保原事件处理函数能正确访问上下文和事件对象。 -
首次立即执行？ 若需第一次触发立刻执行（常见于拖拽起始），可扩展为带
leading选项的版本，但默认节流通常不立即执行，更侧重“控频”而非“首帧响应”。 - 与防抖区别：节流保证单位时间内至少执行一次；防抖是“等停再执行”，适合搜索输入；鼠标移动场景更适合节流，因为需要持续响应位移趋势。
现代写法：用 requestAnimationFrame 替代定时器（进阶推荐）
如果目标是平滑视觉反馈（如跟随鼠标动画），用 requestAnimationFrame 更精准高效——它按屏幕刷新节奏执行，天然限频（约 60fps），且不阻塞主线程。
示例：
let isRafPending = false;
<p>function handleMoveRAF(e) {
if (!isRafPending) {
isRafPending = true;
requestAnimationFrame(() => {
console.log('Render at ~60fps:', e.clientX, e.clientY);
isRafPending = false;
});
}
}</p><p>document.addEventListener('mousemove', handleMoveRAF);
这种方式无需手动设毫秒数，浏览器自动协调，更适合动画类交互。
