Javascript函数仅显示数组的最后一个元素

Question

请看一下这个函数：

var msgdiv, i=0;
msgdiv=$("#message");
messages=["Welcome!","Добро пожаловать!"];
function fadeMessages(messages, div){
    while(i<messages.length){
        div.fadeOut(1000).html('').append(messages[i]).fadeIn(1000);
        i=i+1;
    }  
}
 fadeMessages(messages,msgdiv);

我想要做的是，一一显示数组的元素。但是，上面的函数仅显示数组messages.length 时间的最后一个元素。我哪里做错了？

现场示例： http://jsfiddle.net/QQy6X/

Answer 1

while 的执行速度比fadeOut/fadeIn 调用快得多很多，因此您只能看到最后一个结果。您需要让每个动画都等待前一个动画完成。

我喜欢递归地解决这些问题。请注意，它确实会更改 messages 数组，但将其转换为使用计数器并不难（就像您的原始版本一样）。给你：

var $msgdiv = $('#message'),
    messages = ['Xoş gəlmişsiniz!', 'Welcome!', 'Добро пожаловать!'];

function showNext() {
    var msg = messages.shift();
    if (msg) {
        $msgdiv.fadeOut(1000, function () {
            $(this).text(msg).fadeIn(1000, showNext);
        });
    }
}

showNext();

演示：http://jsfiddle.net/mattball/Exj95/

---

这是一个保留messages 完整的版本：

var $msgdiv = $('#message'),
    messages = ['Xoş gəlmişsiniz!', 'Welcome!', 'Добро пожаловать!'],
    i = 0;

function showNext() {
    if (i < messages.length) {
        var msg = messages[i];
        $msgdiv.fadeOut(1000, function () {
            i++;
            $(this).text(msg).fadeIn(1000, showNext);
        });
    }
}

showNext();

演示：http://jsfiddle.net/mattball/wALfP/

Answer 2

您的while 循环在 div 有机会淡出之前完成执行。使用if 语句和递归：

var msgdiv = $("#message"); 
var i = 0; 
var messages = ["Welcome!", "Добро пожаловать!"]; 
(function fadeMessages() { 
    if (i in messages) { 
        msgdiv.fadeOut(1000, function() {
            $(this).html('').append(messages[i++]).fadeIn(1000, fadeMessages);
        });
    } 
})(); 

http://jsfiddle.net/QQy6X/6/

Answer 3

你的 while 循环很快就结束了；相反，您应该等待动画完成，然后再开始下一个。这很容易通过向fadeIn 添加一个回调函数来实现。我会用这个：

+function(){
    var $msgdiv = $("#message");
    var i = -1;
    var messages = ["Xoş gəlmişsiniz!","Welcome!","Добро пожаловать!"];

    +function fadeNext(){
        $msgdiv.fadeOut(1000, function(){
            $msgdiv.text(messages[i = (i + 1) % messages.length]);
            $msgdiv.fadeIn(1000, fadeNext);
        });        
    }();
}();

http://jsfiddle.net/Paulpro/QQy6X/7/

Answer 4

在 jQuery 中，您不能以您正在做的方式将动画和非动画交织在一起，并期望它们以正确的顺序运行。动画将进入动画队列并在那里依次排序，但非动画将立即运行。因此，事情不会按正确的顺序发生。

要做你想做的事情，你可以使用这样的代码。

messages=["Welcome!","Добро пожаловать!"];

function fadeMessages(msgs, div) {
    var i = 0;
    function next() {
        if (i < msgs.length) {
            div.fadeOut(1000, function() {
                div.html(msgs[i++]).fadeIn(1000, next);
            });
        }
    }
    next();
}

fadeMesssages(messages, div);

这使用fadeIn() 和fadeOut() 的完成函数来执行接下来的步骤。以下是它的工作原理：

1. 它会淡出 div。
2. 在fadeOut的完成函数中，设置下一条消息，然后启动fadeIn。
3. 它推进消息计数器。
4. 在fadeIn的完成函数中，调用该函数开始下一次迭代。

如果您想要在淡出之前延迟（以确保给定消息显示一定时间），您可以在正确的位置添加此 .delay(2000)：

messages=["Welcome!","Добро пожаловать!"];

function fadeMessages(msgs, div) {
    var i = 0;
    function next() {
        if (i < msgs.length) {
            div.delay(2000).fadeOut(1000, function() {
                div.html(msgs[i++]).fadeIn(1000, next);
            });
        }
    }
    next();
}

fadeMesssages(messages, div);

如果您想在下一次迭代开始之前有一个延迟，您可以使用 setTimeout 执行此操作：

messages=["Welcome!","Добро пожаловать!"];

function fadeMessages(msgs, div) {
    var i = 0;
    function next() {
        if (i < msgs.length) {
            div.fadeOut(1000, function() {
                div.html(msgs[i++]).fadeIn(1000, function() {
                    setTimeout(next, 2000);
                });
            });
        }
    }
    next();
}

fadeMesssages(messages, div);