Javascript For Loop Closures ...似乎无法理解这个[重复]

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>

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

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

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

功能：不同的短语保存在 phrases[] 数组中，我想将短语插入到 <p> 元素中，然后向下滑动该元素，将其留在屏幕上一秒钟，然后淡出。然后我想转到 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.