javascript - addEventListener 是否在 while 循环中工作？

Question

我试图循环多个元素来更改单个音频元素的音频源，播放它，一旦结束，更改新的 src 并播放它，直到循环遍历完所有元素:

var contentAudio = new Audio();;

function audioLoop(index, audioModel) {

    while (index < audioModel.length) {
        var audio = contentAudio;
        audio.src = audioModel[index].src;
        audio.play()
        audio.addEventListener('ended', 
            function () {
                index++;
            });
    }
    console.log('done');

}

添加事件监听器似乎不起作用。音频无法播放，我陷入了无限循环。音频结束事件永远不会被触发。我做错了什么吗？有更好的选择吗？

Answer 1

while 循环是同步的，因此它不会等待您的 end 事件。这是我的建议:

var contentAudio = new Audio();

function audioLoop(index, audioModel) {

    (function process(done) {
      if (index >= audioModel.length) {
        done(); return;
      }
      var audio = contentAudio;
      audio.src = audioModel[index].src;
      audio.play()
      audio.addEventListener('ended', function () {
        index++;
        process(done);
      });
    })(function () {
      console.log('done');
    });

}

也是一个audioModel数组。如果是这样，我认为您应该使用 audioModel[index].src 而不是 audioModel.src。