为音频播放器时间戳创建动态一次性JS事件监听器的问题

判断条件始终不成立和HTML5 Audio的固有特性无关，是代码本身的逻辑错误，核心问题有3个：

• 循环闭包陷阱：for...in循环中用var声明的key是函数级作用域，所有事件回调共享同一个key变量，等timeupdate事件实际触发时，循环早已执行完毕，key已经固定为遍历的最后一个键值，根本对应不上绑定时的时间阈值
• 语法错误：回调内的console.log(key[value])没有定义value变量，就算条件成立也会直接抛错中断执行，后续逻辑完全无法走到
• 监听器移除逻辑不规范：arguments.callee在严格模式下被禁用，且这种写法容易因为函数引用不匹配导致监听器移除失败，出现重复触发的问题

把循环变量改成块级作用域的let/const，提前存储每个回调的引用用于移除，修正取值逻辑即可正常运行：

function addAudio() {
  const audio = document.createElement('audio');
  audio.id = "test";
  audio.src = "https://www.uscis.gov/files/nativedocuments/Track%2093.mp3";
  document.querySelector('body').prepend(audio);
}

function playAudio() {
  document.getElementById('test').play();
}

function setupListeners() {
  const items = {
    'message1': 1.5,
    'message2': 3.5,
    'message3': 4.5
  }
  const audio = document.getElementById('test');

  for (const key in items) {
    const triggerTime = items[key];
    console.log(`${key} to start at ${triggerTime}`);
    // 单独存储回调引用，方便后续精准移除
    const callback = function() {
      if (this.currentTime > triggerTime) {
        console.log(`触发消息：${key}`);
        audio.removeEventListener('timeupdate', callback);
      }
    };
    audio.addEventListener('timeupdate', callback);
  }
}

addAudio();
playAudio();
setupListeners();

给每个时间点单独绑定timeupdate监听器会产生冗余的事件绑定，实际上timeupdate事件约每200-250ms触发一次，只需要绑定1个监听器，维护待触发的消息队列即可，性能更好也更容易维护：

function setupSingleListener() {
  // 转成按时间升序排列的数组，避免对象遍历顺序不稳定的问题
  const messageList = [
    { content: 'message1', time: 1.5 },
    { content: 'message2', time: 3.5 },
    { content: 'message3', time: 4.5 }
  ].sort((a, b) => a.time - b.time);
  const audio = document.getElementById('test');

  const timeUpdateHandler = function() {
    const currentTime = this.currentTime;
    // 批量触发所有达到时间阈值的未执行消息
    while (messageList.length && messageList[0].time < currentTime) {
      const currentMsg = messageList.shift();
      console.log(`触发消息：${currentMsg.content}`);
    }
    // 所有消息触发完成后直接移除监听器，减少不必要的性能消耗
    if (!messageList.length) {
      audio.removeEventListener('timeupdate', timeUpdateHandler);
    }
  }

  audio.addEventListener('timeupdate', timeUpdateHandler);
}

注：timeupdate的触发频率本身就存在浏览器差异，这个方案天然支持微小时间误差的容忍要求，不需要额外做时间精度处理。

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