Unclicking a triggered event in JQuery

1

I’m working on the Simon Says project and triggering the computer’s moves like this:

for(var i = 0; i < aiMoves.length; i++) {
      if(aiMoves[i] === 1) {
        $('#green').on('click', function(){
          sound1();
          $('#green').css('opacity', '0.6');
        });
          $('#green').trigger('click');
          $('#green').off();
      }

I call this with setInterval like this:


  var moves = function (){
    simulateClick(randomNumber);
    randomNumber();
}
  setInterval(moves, 2000);

The trigger event works and the button clicks, the sound() function shoots off like it should, the opacity of the button changes like it should, but I can’t get it to unclick after it is done. It should click, run the sound function, light up, and then after that is done I want the button to return to it’s original state. Instead it just get’s stuck and keeps repeating.

How do I get the click/trigger to stop after it runs it’s course?

Check out the codepen for demonstration.

2

Why are you simulating clicks, ie why don’t you just play the sequence? The computer can just change the class, it has the same effect for 100× less effort

1 Like
3

Not sure what you mean. I’m trying to play the sequence via iterating through the array and clicking those buttons. Is there a better way?

4

All you’re doing is changing the colours. The program doesn’t need to click anything - you’re not simulating a player.

Example:

  • say each button has an id
  • and you have a function to pick a random id
  • new empty array at start of game
  • round one, pick random id, push to array. Next round, pick random id, push to array, and so on.
  • when computer plays sequence, take that array and iterate through it: for each id in the array, add an active class, use a timeout for however long it should stay active, then remove the active class.

You’re basically doing this anyway, you’ve just got this extra complication from trying to make each iteration in the sequence a click, when there’s no need to do that at all

1 Like
5

Well, see, every time you trigger the click, what you’re essentially doing is running the function bound to the click event.

So instead of triggering the click to run its function, why not just skip ahead and just run the function’s content as regular lines of code.

for(var i = 0; i < aiMoves.length; i++) {
      if(aiMoves[i] === 1) {
          sound1();
          $('#green').css('opacity', '1');
          setTimeout(function(){ 
              $("#green").css("opacity", "0.6"); 
          }, 200)
      }

You could also name the function and run it.

function lightUp($color){
          $color.css('opacity', '1'); ///Light up
          setTimeout(function(){  ///Turn the opacity back down after 200ms
              $color.css("opacity", "0.6"); 
          }, 200)
}

for(var i = 0; i < aiMoves.length; i++) {
      if(aiMoves[i] === 1) {
          sound1();
          lightUp($("#green"));
      }

So whenever you want to adjust something with the function - say you want the timeout to be longer, or the opacity to be darker - you only have to modify the lightUp function instead of changing it for each and every color.

Also, do note that

var moves = function (){
    simulateClick(randomNumber);
    randomNumber();
}
  setInterval(moves, 2000);

Is not passing a random number to simulateClick. You have to run the function so that it’ll evaluate to its return value.

simulateClick(randomNumber());