For loop with a delay?

1

Hi everybody

I am busy with the Simon game and having some problems.
I have an array that holds the sequence for the computer. Now I am trying to iterate through the computer array at a pace of one index every 1.5 second and at every index I want the corresponding sound to play. With the code I am using (below) all the sounds associated with every index plays at the same time.

  function sequence(computerArr) {
  if (computerArr.length === count) {
  
  var interval = setInterval(function(){                        
   for (var i = 0; i < computerArr.length; i++) {
        if (computerArr[i] === 0) {
            soundRed.load();
            soundRed.play();
            clearInterval(interval);

        } else if (computerArr[i] === 1) {
             soundBlue.load();  
             soundBlue.play();
             clearInterval(interval);

        } else if (computerArr[i] === 2) {
             soundGreen.load();
             soundGreen.play();
             clearInterval(interval);

        } else if (computerArr[i] === 3) {
             soundYellow.load();
             soundYellow.play();
             clearInterval(interval);
        } 
       }
      }, 1500);         
    }             
 };

I am guessing the way I have it, is that every 1.5 seconds the whole for loop is executed, and that is why all the sounds of all the indices play together.
How can I iterate through the array one index at a time every 1.5 seconds?

2

There’s an easy way to do this :

async function() {
    console.log("We will wait for 1.5s until printing the next message to the console"); 
    await sleep(1500);
    console.log("1.5s have now elapsed. "); 
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
3 Likes
3

Thank you for your reply.
I haven’t worked with async functions before, so I have to do some research now

4

Also note a switch is ideal in this case - you can do (note load/play functions commented out so you can just run this in the browser console):

async function playSeq(seq) {
  for (const code of seq) {
    await sleep(1500);
    soundPlayer(code);
  }
}

function soundPlayer(seqCode) {
  switch (seqCode) {
    case 0:
      console.log('red');
      // soundRed.load();
      // soundRed.play();
      break;
    case 1:
      console.log('blue');
      // soundBlue.load();
      // soundBlue.play();
      break;
    case 2:
      console.log('green');
      // soundGreen.load();
      // soundGreen.play();
      break;
    case 3:
      console.log('yellow')
      // soundYellow.load();
      // soundYellow.play();
      break;
  }
}
1 Like
5

This is what I came up with. The above solutions are probably better but this is a way to iterate through an array with a delay.

const arr = [1, 2, 3, 4, 5];
let count = 0;

function slowCycle() {
    console.log(arr[count]);
    count += 1;
    if (count < arr.length) {
        setTimeout(slowCycle, 1500);
    }
}

// slowCycle(); // Starts immediately
setTimeout(slowCycle, 1500); // Delay on start
1 Like