Simon and set Timeouts

1

Hi, im having a bit of an issue and I think it’s due to my fundamental non-understand of timeouts.

Im working on the Simon app, and it’s going well (you can see here: http://codepen.io/msmith1114/pen/aWLJpR), the visuals are garbage right now, im just trying to get the logic first—>then pretty it up.

I have strict mode working and the game plays just fine. HOWEVER the computer “plays” the moves in it’s array, and is supposed to light up each button with a half second delay for example.

So I wrote a function that does this you can see it in my code:

compPlayMoves(view, model) {
    if(model.state === true){
    /*  
    let counter = 0;
    let i = setInterval(function() {
      // do your thing
      view.renderPane(model.moves[counter]);
      setTimeout(view.clearPane(model.moves[counter]), 30000);
      counter++;
      if (counter === model.moves.length) {
        console.log("players turn, enabling buttons")
        clearInterval(i);
      }
    }, 2000);
    */
    }
  }

Basically it goes through the array of the computer moves (1-4, which are the different colors) and attempts to light up the button and then set it back to normal and then go to the next one.

However it’s basically lightning up the button and clearing it instantaneously. Any suggestion? This is the one part im stuck on. If there is a better way to maybe do this based on the array I’d love to here it!

2

I don’t understand the 30000ms setTimeout. Why 300 seconds of waiting?

3

I spent a lot of time yesterday just to get this one functionality to work, first with for loops and setTimeout, then with setInterval. Conclusion is that I don’t like dealing with async functions. This succeeds at blinking out the content of an array (https://codepen.io/TomaszG/pen/aWVedV) but I’m really hoping to find a better solution when I’m refactoring all my stuff.

(Better solutions certainly exist http://stackoverflow.com/questions/5226285/settimeout-in-for-loop-does-not-print-consecutive-values)

4

I was just trying to see if Anything was having any affect so that’s probably just a mis-type

5

I had a similar problem. You might find these threads interesting. I also plan on writing a better version of this with ES6/ES7 soon.

Here are some similar scenarios, click the title to view the thread:

6

Yeah ill take a look at those, thanks!

The issue is (from my understanding) is that the loop is basically calling all the Timeout functions if you do them in a loop so they may delay for whatever MS, but they will all basically get returned at the end at the same time. Unless you altered the timeout in between somehow.

Glad it’s not just me having issues with it, I understand the issue at least but just didn’t have a solution ha!

7

Made some adjustments, the delay seems to at least work when activating the buttons…but the timeout for clear is getting “undefined” even though it’s using the same index…, it’s like it doesn’t know what “index” is when it’s passed to clearPane for some reason.

compPlayMoves(view, model) {
    if (model.state === true) {
      let index = 0;

      function nextBtn() {
        view.renderPane(model.moves[index]);
        setTimeout(function() {
          view.clearPane(model.moves[index]);
        }, 1000);
        index++;
      }
      nextBtn();

      let compPressInterval = setInterval(function() {
        if (index === model.moves.length) {
          clearTimeout(compPressInterval);
          console.log("players turn, enabling buttons");
          return;
        }
        nextBtn();
      }, 2000);
    }

edit: I fixed it by having clearPane be index-1 not index…unsure exactly how that works…