# Simon and set Timeouts

**URL:** <https://forum.freecodecamp.org/t/simon-and-set-timeouts/113292>\
**Category:** General\
**Created:** [May 8, 2017, 3:35am UTC](https://forum.freecodecamp.org/t/simon-and-set-timeouts/113292 "2017-05-08T03:35:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![msmith1114](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/msmith1114/32/49628_2.png) [@msmith1114](https://forum.freecodecamp.org/u/msmith1114)\
**Post date:** [May 8, 2017, 3:35am UTC](https://forum.freecodecamp.org/t/simon-and-set-timeouts/113292/1 "2017-05-08T03:35:18Z")

</div>

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](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!

---

<div class="post-metadata">

**Author:** ![lorepieri](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lorepieri/32/45484_2.png) [@lorepieri](https://forum.freecodecamp.org/u/lorepieri)\
**Post date:** [May 8, 2017, 9:14am UTC](https://forum.freecodecamp.org/t/simon-and-set-timeouts/113292/2 "2017-05-08T09:14:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TomaszGa](https://avatars.discourse-cdn.com/v4/letter/t/7ab992/32.png) [@TomaszGa](https://forum.freecodecamp.org/u/TomaszGa)\
**Post date:** [May 8, 2017, 10:42am UTC](https://forum.freecodecamp.org/t/simon-and-set-timeouts/113292/3 "2017-05-08T10:42:36Z")

</div>

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](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](http://stackoverflow.com/questions/5226285/settimeout-in-for-loop-does-not-print-consecutive-values))

---

<div class="post-metadata">

**Author:** ![msmith1114](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/msmith1114/32/49628_2.png) [@msmith1114](https://forum.freecodecamp.org/u/msmith1114)\
**Post date:** [May 8, 2017, 1:59pm UTC](https://forum.freecodecamp.org/t/simon-and-set-timeouts/113292/4 "2017-05-08T13:59:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![IsaacAbrahamson](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/isaacabrahamson/32/30882_2.png) [@IsaacAbrahamson](https://forum.freecodecamp.org/u/IsaacAbrahamson)\
**Post date:** [May 8, 2017, 2:49pm UTC](https://forum.freecodecamp.org/t/simon-and-set-timeouts/113292/5 "2017-05-08T14:49:24Z")

</div>

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:

> **[Any tutorials on the "setInterval" part of the simon game?](https://forum.freecodecamp.org/t/any-tutorials-on-the-setinterval-part-of-the-simon-game/30834)**
>
> I have an overall idea on how to build the simon game… but I’m stuck in the ‘light up’ buttons one at a time. I’m feeling completely lost ☹ Any tutorials for this part? Thanks

> **[setTimeout loop](https://forum.freecodecamp.org/t/settimeout-loop/39556)**
>
> I have tried every solution on stack overflow for this. I have an array of values. I want to run a start function on array\[i\], then after a delay run an end function on array\[i\]. I want to do this for every element in array with a delay between each...

> **[How to set a delay between forEach loop iteration \[solved\]](https://forum.freecodecamp.org/t/how-to-set-a-delay-between-foreach-loop-iteration-solved/88932)**
>
> Hi all, I’m working on my Simon Game and am having some trouble setting a delay between each simon sequence. I’m wondering, how do you set a delay between each iteration within a forEach loop? I have tried a million different things with...

---

<div class="post-metadata">

**Author:** ![msmith1114](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/msmith1114/32/49628_2.png) [@msmith1114](https://forum.freecodecamp.org/u/msmith1114)\
**Post date:** [May 8, 2017, 4:50pm UTC](https://forum.freecodecamp.org/t/simon-and-set-timeouts/113292/6 "2017-05-08T16:50:26Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![msmith1114](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/msmith1114/32/49628_2.png) [@msmith1114](https://forum.freecodecamp.org/u/msmith1114)\
**Post date:** [May 8, 2017, 6:44pm UTC](https://forum.freecodecamp.org/t/simon-and-set-timeouts/113292/7 "2017-05-08T18:44:14Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:56pm UTC](https://forum.freecodecamp.org/t/simon-and-set-timeouts/113292/8 "2021-01-17T20:56:47Z")

</div>

Closed on January 17, 2021, 8:56pm UTC