JavaScript進行環閉合......似乎無法環繞此

Question

可能重複我的頭：
Javascript closure inside loops - simple practical example

我怎樣才能使這項工作？

// Phrases 

var phrases = new Array(); 
phrases[0] = 'Phrase 1'; 
phrases[1] = 'Phrase 2'; 
phrases[2] = 'Phrase 3'; 

for (var i = 0; i < phrases.length; i++) { 
    var content = phrases[i];   
    $('#phrase').html(content).slideDown('slow').delay(1000).fadeOut('slow');  
}; 

這裏的HTML：

<p id="phrase"></p> 

薪火內容可變進HTML（）功能我注意到，內容總是等於陣列中的最後一句，和循環運行幻燈片/延遲/淡入淡出功能3次。

我知道這是關於for循環中的閉包，我已經看過無數的例子，但我無法繞開它。有人可以向我解釋和解釋這一個嗎？編輯：

編輯：道歉，因爲之前不清楚，我編輯了這個問題，包括HTML和有問題的陣列。

功能性：不同短語在短語保持[]陣列，我想短語插入<p>元件，然後向下滑動該元素，離開它在屏幕上的第二，然後褪色它出。然後我想轉到短語[]數組中的下一個短語並執行相同的功能。

Answer 1

您實際上並沒有關閉的問題，它只是在每次迭代時將innerHTML設置爲content，而沒有考慮到需要先完成的效果。

var showPhrase = function(phrases, start) { 
    start = start || 0; 
    var showNext = function() { 
     $('#phrase') 
     .html(phrases[start]) 
     .slideDown('slow') 
     .delay(1000) 
     .fadeOut('slow', function() { 
      start++; 
      if (start < phrases.length) { 
       showNext(); 
      } 
     }); 
    } 
    showNext(); 
} 

showPhrase(['a', 'b', 'c']); 

jsFiddle。