Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Bryant Feld
seal-mask
.a{fill-rule:evenodd;}techdegree
Bryant Feld
Full Stack JavaScript Techdegree Student 26,144 Points
Posted by Bryant Feld
.a{fill-rule:evenodd;}techdegree
Bryant Feld
Full Stack JavaScript Techdegree Student 26,144 Points

simultaneous vs sequential

I am trying to create a memory game using flashing numbered boxes, I want the computer to make a series of random boxes flash in sequence. For some reason all the randomly selected boxes are flashing simultaneously instead of in sequence, would appreciate anybody who wants to take a look... here is the repo https://github.com/bkfwebdev/Vanilla_JS-MemoryBoxes

Kjetil-Lennart A. Lorentzen
Kjetil-Lennart A. Lorentzen
13,390 Points
Kjetil-Lennart A. Lorentzen
Kjetil-Lennart A. Lorentzen
13,390 Points

So, first of all: Settimeout takes two arguments like this: 

settimeout(()=>{/* code here inside the function */}, 3000)  // and the milliseconds is the second argument, the arguments are seperated by a comma

But that would just delay the whole code exactly 3 seconds, so your problem wasn't solved yet, because what you want to do, is set one timeout for the first one, and then a new timeout for the next round in the loop. get it ? so i multiplied the timeout with your reps, this way it will come in at 1 second at a time. the first one will be 1000 * 0, so instant. next one second (1000 * 1) , next two (1000 * 2) and so on.

function showSequence(sequenceArray){
    let limit = sequenceArray.length;
    for (let rep=0; rep < limit; rep++){
        setTimeout(()=>{
            showSelected(sequenceArray[rep])}, 1000 * rep); // I fix this. It started on line 36 
    }
}

I hope this helped :) I had this exact problem a few months back, drove me nuts, haha

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Staggered timers is certainly one effective implementation. Another would be to modify the timer event callback so that when it process each event, it sets another timer for the next event in the sequence. This takes a bit more code, but it has the advantage of preventing any gaps or overlaps if some system process causes one of the intervals to be inaccurate.

Kjetil-Lennart A. Lorentzen
Kjetil-Lennart A. Lorentzen
13,390 Points
Kjetil-Lennart A. Lorentzen
Kjetil-Lennart A. Lorentzen
13,390 Points

I didn't know this was possible! Fantastic! How do you do this?

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

You start by calling only one "setTimeout" for the first event, and inside the handler you call "setTimeout" for the next one. You'd probably want to pass it the sequence and have it "shift" the array each time.

Kjetil-Lennart A. Lorentzen
Kjetil-Lennart A. Lorentzen
13,390 Points
Kjetil-Lennart A. Lorentzen
Kjetil-Lennart A. Lorentzen
13,390 Points

As always, thank you Steven. You've answered and thought me something every time I've posted or commented on this forum. MVP \o/

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

That feels good to know! Thanks for the nice comments and happy coding!

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Bryant Feld — So I know I helped Kjetil, but did this help you also? You can mark a question solved by choosing a "best answer".

And happy holidays! :christmas_tree: