CODEWITHSUNDEEP
javascriptjquerytimerqueuedeque
Tim Samoff
Tim Samoff

Reputation: 96

Issues with jQuery queue/dequeue…

I have written a function using jQuery queue/dequeue that isn’t working properly, but I can’t figure out why. Take a look here:

http://codepen.io/ProfessorSamoff/pen/XbVRKg

If you look at the end of the function, there’s a part that’s commented out:

/*$('.msg').delay(2000, 'timer').queue('timer', function(){ 
 $(this).empty().fadeIn(5).append('GO!');
}).dequeue('timer');*/

With this commented out, the script runs fine, counting down from 3 to 1 using the fadeIn() functions, etc. But when I uncomment the last part, the function begins counting from 2 instead of 3 and the fadeIn() timing is off.

What am I missing here? is it a lame mistake or something inherently wrong with the queue/dequeue functionality?

/*var go = Math.floor(Math.random() * 5000) + 500;
console.log(go);*/

$('.start').click(function() {
   $('.start').remove();
   $('.msg').delay(2000, 'timer').queue('timer', function(){ 
     $(this).empty().fadeIn(200).append('3').delay(1000).fadeOut(500);
   }).dequeue('timer');

   $('.msg').delay(2000, 'timer').queue('timer', function(){ 
      $(this).empty().fadeIn(200).append('2').delay(1000).fadeOut(500);
   }).dequeue('timer');

   $('.msg').delay(2000, 'timer').queue('timer', function(){ 
     $(this).empty().fadeIn(200).append('1').delay(1000).fadeOut(500);
   }).dequeue('timer');
   
/*$('.msg').delay(2000, 'timer').queue('timer', function(){ 
     $(this).empty().fadeIn(5).append('GO!');
   }).dequeue('timer');*/
});
body {
   font-family: Arial, sans-serif;
   margin: 3em;
}
.start {
   display: block;
   margin: 0 auto;
   padding: 1em 2em 0.8em 1.9em;
   font-weight: bold;
   background: limegreen;
   border: 1px solid #777;
   border-radius: 10px;
}
.start:hover {
   background: lightgreen;
}
.msg {
   text-align: center;
   font-size: 3em;
   font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="start">Start</button>
<p class="msg"></p>

Upvotes: 0

Views: 204

Answers (1)

user4544229
user4544229

Reputation: 

/*var go = Math.floor(Math.random() * 5000) + 500;
console.log(go);*/

$('.start').click(function() {

   $('.start').remove();
   $('.msg').delay(2000, 'timer').queue('timer', function(next){ 
     $(this).empty().fadeIn(200).append('3').delay(1000).fadeOut(500);
     next();
   })

   $('.msg').delay(2000, 'timer').queue('timer', function(next){ 
      $(this).empty().fadeIn(200).append('2').delay(1000).fadeOut(500);
      next();
   })

   $('.msg').delay(2000, 'timer').queue('timer', function(next){ 
     $(this).empty().fadeIn(200).append('1').delay(1000).fadeOut(500);
     next();
   })

$('.msg').delay(2000, 'timer').queue('timer', function(next){ 
     $(this).empty().fadeIn(5).append('GO!');
       next();
   })

.dequeue( 'timer' );
});

Try this one here

Upvotes: 2

Related Questions