It’s amazing how something so seemingly simple can throw you for a loop in javascript or Vue.js. Previously my achilles tendon was syntax and typos, which could send me into a rabbit hole of hours of Stack overflow or W3 schools reading only to discover I was consoel.loging instead of console.loging. But, with the help of linters and recognizing wrong colors, my syntax has improved, or at least my ability to figure it out quickly where I messed up.
Now, my biggest problem is translating the examples shown on message boards and tutorials into my own work. The latest, was timeouts… understanding the need for them and figuring out where to place them in my code.
Working on a clone of the popular ‘80s handheld game Simon, I realized very quickly that the way I was coding the game was made worse by how fast my computer executes a line of code. For example, working on adding a new random color to the computer sequence, a color was generated and pushed to an array. But when I would play back that array, the only color to show was the last color pushed to the array. “HA HA… I’m too clever for that, it’s just running it so fast that all I see is the last color”, which I confirmed by console.loging the entire array and seeing that I was indeed correct. Score one for the programer, I just need to add a delay or something, this should be easy.
I confidently Google “add a delay javascript”, notice the first result is from W3 Schools and I’m off perusing the setTimeout() method section primarily looking for the syntax. After only a couple minutes it seems simple enough to just add a setTimeout() to the Vue.js method that displayed the colors which was called after the method that set the random color. I type in my new found setTimeout() tool and double check spelling because I want this to run correctly the first time. Run the section of code and voila… I see the three second timeout I had set and then… I see the wrong first color selected. That’s funny the first color isn’t right, must have something else wrong let’s see what the next one is… nothing. For at least a minute. Check that I saved the App.js file and refresh the browser to make sure Chrome isn’t messing with me. Rerun the code and… same thing. Alright console.log the array again, rerun, and “why isn’t this damn thing slowing down?” The actual thought that cross my mind was this clip from Back to the Future.
Time to reread the W3 Schools article and even attempt deciphering a Stack OverFlow question or two. No help, I tried everything I read and still got the same result or worse. (At one point, I some how put my timeout into an endless loop and didn’t realize it until I heard the fan turn on and I couldn’t refresh my browser.) Ok this is getting ridiculous, I’ve spent too much time getting this stupid thing to work. I have to go a different route. It’s providing my 3 second delay before calling the function, I need it to delay in between each array item. What if take out my for loop and create an artificial for loop with if statements and a counter? That way I can set my timeout for every element in the array. Not the most efficient way of doing it but it will get me past this roadblock for now. And what do you know it works, kind of. I’m getting the timeout for every element in the array just some timing issues when the user finishes repeating the sequence and a new element is repeated. I’ll figure that out later and move on.
The next part of the code I work on is to evaluate whether the user is selecting the correct sequence with each click of the light. And wouldn’t you know it, I run into a similar timing issue with the user guesses and lights not turning off when the the same light is selected multiple times in a row. Not this again, I don’t want to have to create the same convoluted timeout for this function as I did for the last. I can barely follow the flow of the last one I’m not going to try again with this one. There has got to be more to it that I’m missing. To the W3 Schools batcave again.
This time, instead of perusing for just the syntax maybe read the entire page to see if I’m missing something. Queue the AHHHH….. Choir, because I read all the way down to the section called clearTimeout() which makes the setTimeout() much more programmer friendly. It’s the magic off button and it works with such ease. Plant a setTimeout() anywhere and just place the clearTimeout() where you want to stop. Makes total sense. I put clearTimeout()’s in the next called method and placed them in if statements that determine if the user got the sequence wrong. I put one in the nested if statement that would only be called if the user broke the most sequence record. And now, the world now has a Simon clone made with the Vue.js framework.