优雅监听timeupdate需节流防卡顿、显式清理防泄漏、守卫readyState保稳定：用throttle限制频次，具名函数绑定后手动移除，检查readyState≥1再执行逻辑。
监听音视频播放器的 timeupdate 事件本身很简单，但“优雅”体现在：不卡顿、不重复绑定、及时清理、响应精准、兼顾性能与可维护性。
用节流控制触发频率，避免过度计算
timeupdate 在播放中会高频触发（每 200–250ms 一次，甚至更密），直接在里面做 DOM 更新或复杂逻辑容易造成卡顿。
推荐用轻量节流（非防抖）限制执行频次：
示例（300ms 最小间隔）：
function throttle(fn, delay) {
let last = 0;
return (...args) => {
const now = Date.now();
if (now - last > delay) {
fn(...args);
last = now;
}
};
}
<p>const video = document.getElementById('myVideo');
const updateUI = () => {
const sec = Math.floor(video.currentTime);
document.getElementById('time').textContent = sec + 's';
};</p><p>video.addEventListener('timeupdate', throttle(updateUI, 300));
用 once + capture 确保初始化逻辑只跑一次
有些场景需要在首次 timeupdate 触发时做初始化（如记录起始时间、启用进度条拖动逻辑）。用 { once: true } 避免手动 remove，再配合 capture: true 可提前拦截（虽非必需，但更可控）：
video.addEventListener('timeupdate', () => {
console.log('首次 timeupdate，启动进度监听');
// 启用自定义进度条更新逻辑、埋点初始化等
}, { once: true, capture: false });
绑定前先清理旧监听，防止内存泄漏
尤其在单页应用中，组件反复挂载/卸载，若未清除之前的 timeupdate 监听，会导致多个重复监听器堆积。优雅做法是：用具名函数 + 显式移除：
let timeUpdateHandler;
<p>function setupTimeUpdate() {
timeUpdateHandler = throttle(updateProgress, 300);
video.addEventListener('timeupdate', timeUpdateHandler);
}</p><p>function cleanupTimeUpdate() {
if (timeUpdateHandler) {
video.removeEventListener('timeupdate', timeUpdateHandler);
}
}</p><p>// 组件销毁或切换时调用 cleanupTimeUpdate()
监听前检查 readyState，避免无效触发
timeupdate 可能在媒体尚未加载元数据（readyState < 1）时就触发（尤其网络不佳时），此时 currentTime 可能为 NaN 或 0，导致 UI 错误或报错。加一层守卫更稳健：
video.addEventListener('timeupdate', () => {
if (video.readyState < HTMLMediaElement.HAVE_METADATA) return;
<p>// 此时 currentTime 是可信的
const progress = video.currentTime / video.duration;
progressBar.style.transform = <code>scaleX(${progress})</code>;
});
不复杂但容易忽略：节流 + 清理 + 守卫，三者组合就能让 timeupdate 监听既轻量又可靠。
