jQuery队列/脱队列…问题

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()的时间是关闭的。

我在这里错过了什么？这是一个蹩脚的错误，还是队列/脱队列功能固有的错误？

​

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

试试这个