如何基于timeupdate事件实现视频播放每10秒间隔单次触发函数

timeupdate事件的触发频率约为每250ms一次，你原有逻辑设置的判断条件是currentTime % 10 < 1，相当于跨过10秒节点后有整整1秒的时间窗口会满足判断规则，窗口内的多次事件触发自然会重复调用目标函数。
解决核心是增加一个标记变量，记录已经触发过事件的10秒节点，只有首次进入新的10秒区间时才执行目标函数，从根源避免重复触发。

基础实现代码 #

// 记录上一次已经触发过事件的时间节点，初始值为0
let lastTriggeredPoint = 0;

videoPlayer.on('timeupdate', () => {
  const current = videoPlayer.currentTime();
  // 计算当前播放进度对应的10秒整数节点
  const currentPoint = Math.floor(current / 10) * 10;

  // 跳过0秒起点，仅当进入未触发过的新节点时执行逻辑
  if (currentPoint > 0 && currentPoint > lastTriggeredPoint) {
    // 先更新标记，避免重复执行
    lastTriggeredPoint = currentPoint;
    myFunc(currentPoint);
  }
});

边界场景适配 #

• 进度条拖动场景：如果用户拖动进度条直接跳过多个10秒节点，可通过循环补全所有被跳过节点的事件触发，适配代码如下：

if (currentPoint > 0 && currentPoint > lastTriggeredPoint) {
  // 逐个触发所有跨过的未触发节点
  for (let point = lastTriggeredPoint + 10; point <= currentPoint; point += 10) {
    myFunc(point);
  }
  lastTriggeredPoint = currentPoint;
}

• 视频重播场景：监听视频的ended、seeked事件，当检测到播放时间回到0秒附近时，将lastTriggeredPoint重置为0，保证重播到10秒节点时可以正常触发事件。

内容的提问来源于stack exchange，提问作者kdizzle