How to trigger an action once with a jQuery queue() loop

Question

I have a jQuery object with a number of elements, e.g. $('.items'). I have these items going through some processing inside a queue(), and depending on conditions, I want to change a variable. After the queue has completed, I want to check that variable and trigger an event. My issue is that checking the variable and doing something inside the queue will fire multiple times (for each node in the jQuery object being looped through), and doing this outside the queue happens before the queue finishes, so it's not catching the variable update.

For example:

var triggered = false;

$('.items').addClass('doing-things').delay(500).queue(function(next) {
  // Do some things
  console.log('Things are happening');
  // Check conditions and change variable
  if ( someCondition ) {
    triggered = true;
  }
  // Finished doing things
  $(this).removeClass('doing-things');
  next();
}).queue(function(next) {
  // Check inside queue
  if ( triggered ) { 
    // This will be fired repeatedly in the loop, $('.items').length number of times
    console.log(triggered); 
  }
  next();
});

// Check after queue
if ( triggered ) { 
  // This will fire once, but will be false, because it will fire before the queue finishes (with delays)
  console.log(triggered); 
}

Can anyone point me towards how I can update the triggered variable inside the queue, then check it and fire an event (or in this example, do console.log(triggered)) only once?

Edit: Example fiddle here for debugging.

So, the only question is How to update triggered variable inside the queue, check it and fire an event?. — gurvinder372
– gurvinder372, Commented Nov 15, 2017 at 6:42
Yeah, and fire that event only once after the queue completes. — t-jam
– t-jam, Commented Nov 15, 2017 at 6:43
Can you create a working snippet using <> so that it is easier to debug? — gurvinder372
– gurvinder372, Commented Nov 15, 2017 at 6:55
you can share that what you intended to do with your example, it's clear about variable concept however it's more better to share your real intention. — mlimon
– mlimon, Commented Nov 15, 2017 at 7:21

gurvinder372 · Accepted Answer · 2017-11-15 09:16:57Z

1

Rather than simply checking for triggered to be true, you wait for triggered to be true

Demo

var triggered = false,
		$test1 = $('#test1'),
    $test2 = $('#test2');

$('.item').addClass('doing-things').delay(1000).queue(function(next) {
  // Do some things
  console.log('Things are happening');
  // Check a condition and change variable
  if ( !triggered ) {
    triggered = true;
  }
  // Finished doing things
  $(this).removeClass('doing-things');
  next();
}).queue(function(next) {
  // Check inside queue
  if ( triggered ) { 
    // This will be fired repeatedly in the loop, $('.items').length number of times
    $test1.append('<div>Fired</div>'); 
  }
  next();
});
triggerEvent();

function triggerEvent ()
{
   if( !triggered )
   {
     setTimeout( triggerEvent, 1000 );
   }
   else
   {
       $test2.append('<div>Fired</div>'); 
   }
}

.item {
  padding: 10px;
  margin: 10px;
  border: 2px solid #aaa;
}

.item.doing-things {
  border-color: #f00;
}

.test {
  padding: 20px;
  margin: 10px;
  background: #fff;
}

#test1 {
  border: 2px solid #0f0;
}

#test2 {
  border: 2px solid #00f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>

<div id="test1" class="test"></div>
<div id="test2" class="test"></div>

answered Nov 15, 2017 at 9:16

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

t-jam Over a year ago

Thanks, though I now realise it may not be explicit in the question that checking is important because I want to fire a different event if false after the queue - it's not just true that's important...

gurvinder372 Over a year ago

Ohh, in that case, keep another variable to check if the queue functions has been completed or not.

t-jam Over a year ago

Found a good way of doing this: by comparing $(this).index() to the object length in the queue, we can identify if it's the loop is on its last cycle, then fire the trigger check.

gurvinder372 Over a year ago

@t-jam you mean inside the queue itself? Yes, that should work as well.

Collectives™ on Stack Overflow

How to trigger an action once with a jQuery queue() loop

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related