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

試試這個位置