Question

我必须在循环中添加延迟，以便在完成上一个音频后播放下一个音频为此，我需要延迟才能进入下一次迭代。

代码段

 for (var i=0; i<=total_units; i++) { 
    var audio;
    switch (dispatch_units[i]) {
        case 'ST39':
        audio = new Audio('sounds/alert1.mp3');
            break;
        case 'ALS':
            audio = new Audio('sounds/monty_engine.mp3');
            break;
        case 'ST38':
            audio = new Audio('sounds/twotone.mp3');
            break;
    }
    audio.play();                               
 }

任何帮助都将因延迟5秒

而受到赞赏

Answer 1

您不能以不会出现严重UI问题的方式延迟执行for循环。

相反，使用一系列回调在前一个项目结束五秒后播放下一个项目：

var i = 0;
runOne();
function runOne() {
    var audio;
    switch (dispatch_units[i]) {
        case 'ST39':
            audio = new Audio('sounds/alert1.mp3');
            break;
        case 'ALS':
            audio = new Audio('sounds/monty_engine.mp3');
            break;
        case 'ST38':
            audio = new Audio('sounds/twotone.mp3');
            break;
    }
    // If it's impossible for `audio` not to be set here, you can simplify this
    if (audio) {
        audio.addEventListener("ended", runNext);
        audio.play();
    } else {
        setTimeout(runNext, 0);
    }

    function runNext() {
        audio.removeEventListener("ended", runNext);
        ++i;
        if (i <= total_units) {
            setTimeout(runOne, 5000);    // <=== 5000ms = 5 seconds
        }
    }
}

这是使用Rayon Dabre指出的ended事件in a comment，但您可以根据需要替换任何其他事件。

如果您不想等到它结束，那就更简单了：只需删除ended回调，然后在启动每个回复后直接致电setTimeout(runNext, 5000)：

var i = 0;
runOne();
function runOne() {
    var audio;
    switch (dispatch_units[i]) {
        case 'ST39':
            audio = new Audio('sounds/alert1.mp3');
            break;
        case 'ALS':
            audio = new Audio('sounds/monty_engine.mp3');
            break;
        case 'ST38':
            audio = new Audio('sounds/twotone.mp3');
            break;
    }
    // If it's impossible for `audio` not to be set here, you can simplify this
    if (audio) {
        audio.play();
    }
    ++i;
    if (i <= total_units) {
        setTimeout(runOne, audio ? 5000 : 0);    // <=== 5000ms = 5 seconds
    }
}

旁注：从0开始并经过<= total_units是不常见的。通常，如果您从0开始，则需要经过< total_units。

Answer 2

您可以使用setInterval()来执行此操作。

要停止间隔，请使用clearInterval()

代码示例

var i = 0;
var loop = setInterval(function() {
  var audio;
  switch (dispatch_units[i]) {
    case 'ST39':
      audio = new Audio('sounds/alert1.mp3');
      break;
    case 'ALS':
      audio = new Audio('sounds/monty_engine.mp3');
      break;
    case 'ST38':
      audio = new Audio('sounds/twotone.mp3');
      break;
  }
  audio.play();
  i++;
  if(i<=total_units) {
      clearInterval(loop);
  }
}, 5000);

对于下一次迭代之前的循环延迟

2 个答案: