节流能有效缓解拖拽卡顿——它按固定节奏（如16ms）更新位置，避免 mousemove 频繁触发导致重排重绘；推荐时间戳版节流，无定时器开销、首次立即执行、不丢帧。
拖拽过程中频繁计算位置会导致页面卡顿，节流能有效缓解这个问题——它让位置更新按固定节奏执行，而不是鼠标每动一下就立刻算一次。
为什么拖拽需要节流
原生 mousemove 事件在快速拖拽时每秒可能触发几十次。如果每次都在回调里调用 getBoundingClientRect()、修改 left/top 样式或做坐标换算，会引发大量重排（reflow）和重绘（repaint），尤其在中低端设备上明显掉帧。
节流不是“等用户松手再更新”，而是“匀速更新”：比如设为 16ms（约 60fps），就能保证视觉流畅，又避免过度计算。
用时间戳版节流控制 mousemove
推荐使用时间戳方式实现节流，它无定时器开销、首次立即响应、不易丢帧，特别适合拖拽这种对即时性敏感的场景：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 记录上一次成功执行的时间戳
- 每次 mousemove 触发时，对比当前时间与上次执行时间差
- 差值 ≥ 设定间隔才执行位置更新，否则跳过
代码示例：
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>// 拖拽逻辑中使用
let isDragging = false;
const draggable = document.getElementById('draggable');
let offsetX, offsetY;</p><p>draggable.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - draggable.offsetLeft;
offsetY = e.clientY - draggable.offsetTop;</p><p>const throttledMove = throttle((e) => {
draggable.style.left = <code>${e.clientX - offsetX}px</code>;
draggable.style.top = <code>${e.clientY - offsetY}px</code>;
}, 16); // 约 60fps</p><p>const handleMove = (e) => {
if (isDragging) throttledMove(e);
};</p><p>document.addEventListener('mousemove', handleMove);
document.addEventListener('mouseup', () => {
isDragging = false;
document.removeEventListener('mousemove', handleMove);
});
});配合 position: absolute 和防布局抖动
节流只管执行频次，但位置更新本身也可能触发重排。需同步注意：
- 确保 draggable 元素已设置 position: absolute 或 fixed，避免每次改 left/top 引发父容器重排
- 避免在节流函数内反复调用 offsetTop/offsetLeft——它们是读操作，但会强制同步布局；优先用缓存的 offsetX/offsetY 计算
- 如需高精度（例如考虑缩放、滚动偏移），把 window.scrollX/Y 和 getBoundingClientRect() 提前算好并缓存，不在节流回调里实时读
不建议用定时器版节流处理拖拽
定时器版（基于 setTimeout）在 mousemove 中容易出现“最后一次移动未被执行”的情况——用户松手瞬间，计时器还没到时间就被清除，导致元素停在错误位置。
时间戳版天然规避这个问题：只要鼠标还在动，就持续比对时间差；哪怕只差 1ms，下一次 move 也会立刻补上，更符合拖拽的交互直觉。
