数组打印调用未与for循环计数器Javascript同步更新

我对JavaScript和JQuery相当陌生。我已经为一个段落写了一系列的结尾，我正试图使用

for

循环来彼此循环。虽然我看到了淡入淡出的数量，但我的网站上的文字并没有改变

代码如下：

var paragraphs = ["foo", "bar", "foobar"];

var rotateText = function(){
    for(var i = 0; i < paragraphs.length; i++){
        $("#id").text(paragraphs[i]).fadeIn(2000).delay(2000).fadeOut(2000);
    }
};

rotateText();

var段落=[“foo”，“bar”，“foobar”]；
var rotateText=函数（）{
对于（变量i=0；i

这里有几个问题：

.text

不符合标准动画效果队列

对于队列，

i

的值将增加到3，因此它不能用于回调

这可以通过向

.queue

添加通过回调更改的文本来解决，该队列本身是通过一个函数创建的，该函数使用

i

的值作为参数，以便可以在本地按原样使用。总而言之：

for (var i = 0; i < paragraphs.length; i++){
    $("#id").queue((function (i) {
        return function () {
            $(this).text(paragraphs[i]).dequeue();
        };
    })(i)
    ).fadeIn(2000).delay(2000).fadeOut(2000);
}

for（变量i=0；i

在行动中看到它：

试试这个：

这将以循环方式打印文本：foo-bar-foobar-foo-bar

var faderIndex = 0,

paragraphs = ["foo", "bar", "foobar"];
function nextFade() {
    $('#id').text(paragraphs[faderIndex]).fadeOut(1000, function() {
        faderIndex++;
        if (faderIndex >= paragraphs.length)
            faderIndex = 0;
        $('#id').text(paragraphs[faderIndex]).fadeIn(1000, nextFade);
    });
}
nextFade();

<div id="id"></div>

var faderIndex=0，
段落=[“foo”、“bar”、“foobar”]；
函数nextFade（）{
$（'#id'）.text（段落[faderIndex]）.fadeOut（1000，函数（）{
faderIndex++；
如果（faderIndex>=段落长度）
faderIndex=0；
$（'#id'）.text（段落[faderIndex]）.fadeIn（1000，下一个版本）；
});
}
nextFade（）；

演示：

---

另请参见：

提示：

fadeIn（）

（及其好友）不同步。请提供一个JSFIDLE示例，非常好，谢谢您的解释。我一定要熟悉队列功能。再次感谢！还请注意，您可以使用

$。each

迭代

段落

，并创建一个回调，它是一个单独的闭包，每次都可以使用索引。您不必创建自己的临时关闭。谢谢您的帮助！另外，很抱歉重复问题，但谢谢您的参考。