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

1

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

$(color).trigger(“click”)

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?

2

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];
        $(color).trigger("click");
      },i * 1000);
    }
  }
3

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);
                                  $(color).trigger("click");
                                   },i*1000);
                                   }
                                }

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

4

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);
      setTimeout($(color).trigger("click"),i*1000);
  }
  }

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?

6

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

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