Javascript For 循环闭包...我似乎无法理解这个问题

Question

可能的重复：
循环内的 JavaScript 闭包 - 简单的实际示例

我怎样才能完成这项工作？

// 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>

将 content 变量传递到 html() 函数中我注意到 content 始终等于数组中的最后一个短语，并且循环运行幻灯片/延迟/淡入淡出功能 3 次。

我知道这与 for 循环内的闭包有关，并且我看过无数的例子，但我就是无法理解它。有人可以向我解决并解释这个问题吗？

编辑：抱歉之前不清楚，我已经编辑了这个问题以包含有问题的 HTML 和数组。

功能：不同的短语保存在phrases[]数组中，我想将短语插入到

元素中，然后向下滑动该元素，将其在屏幕上停留一秒钟，然后淡出。然后我想继续处理 phrases[] 数组中的下一个短语并执行相同的功能。

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。