javascript - jQuery 队列/出队问题...

Question

我使用 jQuery 队列/出队编写了一个无法正常工作的函数，但我不明白为什么。看看这里:

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

在这里试试这个