For loop delay before next iteration

Question

I have to add the delay in the loop so that next audio will play after the completion of the previous audio For that i need delay before moving to the next iteration .

Code Snippet

 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();                               
 }

Any Help will be appreciated for adding the delay of 5 sec

Answer 1

You can't delay the execution of the for loop in a way that won't have serious UI issues.

Instead, use a sequence of callbacks to play the next item five seconds after the previous one ends:

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
        }
    }
}

That's using the ended event that Rayon Dabre pointed out in a comment , but you can substitute any other event as necessary.

If you don't want to wait until it ends, it's even simpler: Just remove the ended callback and directly call setTimeout(runNext, 5000) after starting each of them:

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 note: It's unusual to start with 0 and go through <= total_units . Normally if you start with 0 you go through < total_units .

Answer 2

You can use setInterval() to do that.

To stop the interval, use clearInterval()

Code example

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);