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>元素，然后滑动该元素向下，将其留在屏幕上一秒钟，然后将其淡出。然后我想转到 phrase [] 数组中的下一个短语并执行相同的功能。

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

Javascript For Loop Closures ...似乎无法绕过这个问题

1 个答案: