节流函数用于解决video的timeupdate事件高频触发导致的性能问题，通过限制每200ms～500ms执行一次回调，避免冗余DOM更新、接口请求或计算，提升流畅性。
节流函数在视频播放进度监听中，主要是为了解决 timeupdate 事件高频触发导致的性能浪费问题——比如每秒可能触发 20~30 次，但你往往只需要每 200ms 或 500ms 获取一次当前播放时间，用于更新进度条、记录观看点或上报埋点。
为什么视频进度监听需要节流
timeupdate 是浏览器原生事件，只要视频在播放且有时间变化就会频繁触发（尤其在硬件加速或高帧率场景下）。不加节流直接写 console.log(video.currentTime) 可能瞬间打满控制台；若里面包含 DOM 更新、接口请求或复杂计算，会明显卡顿或造成冗余请求。
用闭包实现一个简易节流函数
适用于轻量、无需依赖 Lodash 的场景：
function throttle(fn, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}使用方式：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 绑定到
timeupdate时，把耗时操作包裹进去 - 延迟值建议设为 200ms～500ms：太小起不到节流作用，太大可能丢失关键进度（如快进时）
- 注意：该版本是「定时器前执行」，即首次触发立即执行，之后按间隔执行
结合 video 元素的实际写法
示例：每 300ms 同步一次播放进度到 UI，并防抖式上报观看点
const video = document.getElementById('myVideo');
const updateProgress = throttle(() => {
const currentTime = Math.floor(video.currentTime);
document.getElementById('progress').textContent = `已播放 ${currentTime}s`;
<p>// 可选：每 5 秒上报一次（配合额外逻辑，非单纯节流）
if (currentTime % 5 === 0) {
reportViewPoint(currentTime);
}
}, 300);</p><p>video.addEventListener('timeupdate', updateProgress);关键细节：
- 节流函数返回的是新函数，需赋值给变量再传入
addEventListener - 不要在回调里重复创建节流函数（如写成
video.addEventListener('timeupdate', throttle(...))），否则每次触发都新建闭包，失去节流意义 - 如果需「停止后补发最后一次」（如拖拽结束时立刻更新），应改用防抖（debounce），而非节流
更稳妥的方案：用 requestAnimationFrame 替代定时器
对动画/视觉同步要求高的场景（如实时进度条渲染），可用 requestAnimationFrame 实现更平滑的节流：
function rafThrottle(fn) {
let isPending = false;
return function(...args) {
if (!isPending) {
isPending = true;
requestAnimationFrame(() => {
fn.apply(this, args);
isPending = false;
});
}
};
}优点：
- 与屏幕刷新率同步（通常 60fps），视觉更连贯
- 在页面后台或 tab 失焦时自动降频，省资源
- 适合纯 UI 同步类操作（如 canvas 绘制进度、CSS 过渡）
注意：它不保证固定毫秒间隔，而是「每帧最多执行一次」，所以不适合严格按时间间隔上报的业务。
