どのようにjavascriptのキューから要素を削除するには？

Question

私はJavaScriptを使ってキューを使用しようとしていました。私が参照していたthis link

私はキューに追加することができましたが、キューから削除しようとしている間、私は完全に成功しませんでした。

var queue = []; 
var input = $(".text").text(); 
for (var i = 0; i < input.length; i++) { 
    queue.push("<span class='charToFade'>" + input.charAt(i) +"</span>"); 
} 
$(".text").text(""); 
for (var j = 0; j < queue.length; j++) { 
    $(".text").append(queue.shift()); 
} 

入力：

<div class="text">Phone</div> 

出力：

Pho 

あなたがいずれかがここに

Answer 1

実行中の問題は、キューの各反復でアイテムが削除されることです。

これは、キューの長さが毎回変化し、var jの約半分がキューの長さに等しいため、forループの条件の予想される評価を変更します。

私が代わりのためのwhileループ使用することをお勧め：

while(queue.length > 0){ 
$(".text").append(queue.shift()); 
} 

Answer 2

あなたのwhileループを手伝ってくれるJsfiddle

を確認することができます各反復での長さが1減らされます。したがって、完全に反復しません。

var queue = []; 
var input = $(".text").text(); 
for (var i = 0; i < input.length; i++) { 
    queue.push("<span class='charToFade'>" + input.charAt(i) + "</span>"); 
} 
$(".text").text(""); 
var l = queue.length; 
for (var j = 0; j <l ; j++) { 
    var e = queue.shift(); 
    $(".text").append(e);  
} 

Answer 3

別の方法を、forループを使用します。

var queue = []; 
var input = $(".text").text(); 
for (var i = 0; i < input.length; i++) { 
    queue.push("<span class='charToFade'>" + input.charAt(i) +"</span>"); 
} 
$(".text").text(""); 

// change here 
for (var j = queue.length; j >= 0; j--) { 
    $(".text").append(queue.shift()); 
}