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/

---

这是一个完整保留消息的版本:

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/