Question about setInterval in my code for the Simon game

#1

Hi, the link to my codepen is: https://codepen.io/glennqhurd/pen/EQqxKe

The specific code I need help with is on line 93. Here’s the code block:

function buttonSequence(count) {
    for (var i = 0; i < count; i++) {
      if (moveList.length < i + 1) {
        var random = Math.floor(Math.random() * 4);
        moveList.push(colorList[random]);
      }      
      //for (var j = 0; j <= i; j++) {
      var sequence = setInterval(function() {
        switch (moveList[count]) {
          case "red":
            buttonFlashRed($("#arc1"));
            break;
          case "blue":
            buttonFlashBlue($("#arc2"));
            break;
          case "yellow": 
            buttonFlashYellow($("#arc3"));
            break;
          case "green":
            buttonFlashGreen($("#arc4"));
            break;
        }
        count++;
        if(moveList.length <= count) {
          clearInterval(sequence);
          count = 0;
        }
      }, 300);
    }
  }

The problem is when the code gets to

var sequence = setInterval(function() {

it ignores the code and skips ahead to the top of the for loop. I don’t know if it’s because of the way for loops work in Javascript but I need it because I’m trying to get the computer to generate a sequence based off of a given number and list that stores the moves. I’m stumped. (Also, it was working w/o the setInterval but the buttons would be flashing simultaneously.)

#2

Add console.log(count) on the line before var sequence = setInterval(function() { and you will see you start with count = 2. The first time the setInterval callback function is executed, your switch statement is evaluating moveList[2]. Since the there are only 2 elements in moveList, moveList[2] is undefined.

BTW - I am perplexed why after I showed you how to make your code DRY, you have gone back and added tons of duplicate code. It would be quite easy to reduce 90% of the duplicate code you have reintroduced, but you will have to rethink your logic just slightly.

#3

So this is also a coming interview question you may see.

Using a setTimeout or setInterval doesn’t fire as you think it would - in a blocking aka synchronise order. It gets added to the browsers ha engine runtime queue and will get fired when the queue item is ready to be fired.

So essentially you may think that your setTimeout is going to fire before your next iteration of your loop but in fact that may not be the case.

So basically you can’t use that function there in the manner.

#4

I cleaned it up again, it only took a while to get to because I went out of town w/o a computer for four days. Now there’s one function that works for all four buttons, I just have to combine the three dicts involved into a single object w/ three properties per id.

#5

Thank you for the advice, I’m still wrapping my brain around timers in Javascript since as you said it’s not linear.

#6

Here is a starting point that will guide you in understanding JS more. It’s important to know HOW JS works as well as just writing it.