jQuery队列/出队问题...

Question

我写了一个使用jQuery队列/出列功能无法正常工作的函数，但我找不到原因。看看这里：

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

如果你看一下函数的最后，有这么注释掉了一部分：

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

有了这个注释掉，脚本运行正常，减计数从3到1使用fadeIn（）函数等。但是当我取消注释最后一部分时，函数从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'); 
}); 

试试这个位置