setTimeout失效：满足条件时重复播放提示音仅首次发声问题排查

嘿，我帮你找出问题的根源啦！你的代码里有几个关键问题，导致只有第一次蜂鸣能正常播放：

1. setTimeout 的调用方式错误 #

你写的 setTimeout(repeat(times), 3000); 是直接执行了 repeat(times) 函数，然后把它的返回值（undefined）传给了 setTimeout。这就导致三次 repeat 调用几乎在瞬间完成，浏览器的音频播放机制会因为音频还在播放（或者快速连续调用的限制），只执行第一次播放，后面的都被忽略了。

正确的做法是给 setTimeout 传递一个函数引用，而不是函数执行的结果——比如用箭头函数包裹你的调用：

setTimeout(() => repeat(times), 3000);

2. 音频元素没有重置播放位置 #

当音频播放完一次后，它的 currentTime 会停在音频的结尾位置。如果不重置这个值，再次调用 play() 时，浏览器会认为音频已经播放完毕，不会触发新的播放。所以每次播放前需要把 currentTime 设为 0：

const alertAudio = document.getElementById("alert");
alertAudio.currentTime = 0;
alertAudio.play();

3. 额外的 this 指向问题（针对你尝试的第二种写法） #

你试过的 setTimeout(document.getElementById("alert").play, 3000); 也无效，是因为单独取出 play 方法后，它的 this 指向不再是音频元素本身，而是全局对象（浏览器里是 window）。这样调用 play() 时，实际上没有正确关联到音频元素，自然不会播放声音。

修正后的完整代码 #

把这些问题都修复后，代码应该是这样的：

function repeat(times) {
  const alertAudio = document.getElementById("alert");
  // 重置音频到开头
  alertAudio.currentTime = 0;
  alertAudio.play();

  if (--times > 0) {
    // 用箭头函数包裹，确保延迟执行repeat
    setTimeout(() => repeat(times), 3000);
  }
}

repeat(3);

这样就能按照3秒的间隔，重复播放3次提示音啦！

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