Synchronizing $("div#name").trigger("click") with the order of the array

For the Simon Game project,

I currently have a start button that randomly chooses colors to put into an array,

then I pass the array into a function that iterates through the array and

uses the color variable as the selector to change the color.

The issue I am having is that the $(selector).trigger(“click”) is not executing in the

same order as the order in the array.

ex: color_array = ["#blue","#red", “#green”,"#red"] when passed to a function containing


it executes where blue, red and green executes simultaneously,

then red executes.

Rather than blue then red then green then red.

I know it might have something to do why the asynchronicity of .trigger vs the synchronicity for-loops

but I tried to use setTimeout() and had the same result.

I also explored using .queue() but I only found examples where the animation is only done on one element.

See the Pen simon by Justo Guillermo Montoya (@justoMontoya) on CodePen.

In short, how do I make $(color).trigger(“click”) in the order of the color array?

I don’t see your setTimeout code, but that is what I would use in your playSimonSequence function.

  function playSimonSequence(){
    //iterate through colors
    for(let i=0;i<=seq.length;i++){
      setTimeout(function() {
        let color="#"+seq[i];
      },i * 1000);

Thank you for your response.
I tried it but it isn’t working because there is a problem with the scope of my “seq” array. I thought that by having the “seq” array declared globally would allow the setTimeout() to use the array as I intended.

I tried modifying the code with the following:

               function playSimonSequence(){
                 for(let i=0;i<seq.length;i++){ 
                       setTimeout(function(seq,i){ \\included seq and i in the parameter
                                   var color="#"+seq[i];
                                   console.log(i +""+color);

but it still did not work for me. :tired_face:

What is it about for-loops such that in

 function playSimonSequence(){
    //iterate through colors
    for(var i=0;i<seq.length;i++){
      var color="#"+seq[i];
      console.log(i+" "+color);

An array [ “green”, “green”,“red”]

console log spits out 0 #green
1 #green
2 #red
yet the #green and #red div have their .trigger(“click”) function executed at the same time, then there is one more #green div .trigger(“click”) .

Is saying they “execute in parallel” the correct way to describe that?

When I replace your playSimonSequence with the one I provided, it works fine. The seq array is global so your the function has access to it. It was not necessary to add parameters to the setTimeout’s callback function, because when you do that, seq and i become undefined.

I guess I am not understanding the issue you are having when you use the exact code for the playSimonSequence function which I provided.

I must have made some error transcribing it. Thank you!

Maybe it was because I used “var” rather than “let”.