jQuery queue/dequeue 的问题...

Question

我使用 jQuery queue/dequeue 编写了一个函数，但无法正常工作，但我不明白为什么。看这里：

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

如果你看函数的末尾，有一部分被注释掉了：

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

注释掉后，脚本运行正常，使用 fadeIn() 函数从 3 倒数到 1，等等。但是当我取消注释最后一部分时，函数从 2 而不是 3 开始计数，并且 fadeIn () 时间不对。

我在这里错过了什么？这是一个蹩脚的错误还是 queue/dequeue 功能本身的错误？

/*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>

Answer 1

/*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' );
});

在这里试试这个

jQuery queue/dequeue 的问题...

Issues with jQuery queue/dequeue…

javascript

jquery

timer

queue

deque