必须用节流而非防抖，因拖拽需实时视觉反馈；节流采用时间戳+定时器融合版，确保首次立即执行、持续稳定间隔（如150ms）、松手前最后一次不丢失。
音视频进度条拖拽是典型的高频连续操作场景——用户按住滑块横向拖动时，input 或 change 事件（尤其在 Chrome 中）可能每几十毫秒就触发一次，若直接绑定播放器的 currentTime 设置和 UI 更新，会导致：
• 多余的 DOM 重绘与布局计算
• 播放器频繁 seek，影响解码稳定性
• 在低性能设备上出现卡顿或跳帧
为什么必须用节流，而不是防抖？
防抖会等到拖拽“停止”才更新时间，但用户拖动过程中需要实时视觉反馈（如进度条跟随、当前时间显示），不能等松手才响应。节流则保证「拖动中每 100–200ms 至少同步一次」，兼顾流畅性与性能。
节流实现要点（适配拖拽场景）
推荐使用「时间戳 + 定时器融合版」，确保：
• 首次拖动立即响应（不等待延迟）
• 拖动持续时稳定间隔执行（如 150ms）
• 松手前最后一次更新不丢失（trailing）
立即学习“Java免费学习笔记（深入）”；
示例代码：
function throttleForSeek(func, delay) {
let lastExecTime = 0;
let timerId = null;
return function (...args) {
const now = Date.now();
// 立即执行首次调用
if (now - lastExecTime > delay) {
func.apply(this, args);
lastExecTime = now;
if (timerId) {
clearTimeout(timerId);
timerId = null;
}
} else if (!timerId) {
// 延迟执行末次（松手瞬间补一次）
timerId = setTimeout(() => {
func.apply(this, args);
lastExecTime = Date.now();
timerId = null;
}, delay - (now - lastExecTime));
}
};
}
实际绑定方式（以原生 <input type="range"> 为例）
• 使用 input 事件监听拖拽过程（非 change，后者只在松手后触发）
• 节流函数需正确绑定 this 和参数（如 event.target.value）
• 同步设置 video.currentTime 和更新时间文案
示例：
const video = document.getElementById('myVideo');
const range = document.getElementById('progressBar');
const throttledSeek = throttleForSeek((value) => {
const newTime = parseFloat(value);
video.currentTime = newTime;
document.getElementById('currentTime').textContent = formatTime(newTime);
}, 150);
range.addEventListener('input', (e) => {
throttledSeek(e.target.value);
});
补充优化建议
• 若使用第三方播放器（如 Video.js、hls.js），优先查阅其是否内置节流选项（如 seekThrottle 配置）
• 对于移动端 touch 拖拽，需同时监听 touchmove 并做相同节流处理
• 避免在节流回调中执行耗时操作（如复杂格式化、DOM 查询），提前缓存引用
• 可配合 requestAnimationFrame 做 UI 渲染层节流（如仅在下一帧更新进度条样式），与逻辑层节流正交叠加
