Задержка цикла перед следующей итерацией

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

Вы не можете задержать выполнение цикла 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 
     } 
    } 
} 

Вот с помощью ended события, вискоза Dabre указал, 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 
    } 
} 

---

Side Примечание: Это необычно начать с 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);