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

Javascript function shows only last element of array

本文关键字：最后一个 元素 数组 显示 函数 Javascript      更新时间：2023-09-26

请看下面的函数:

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/

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/

您的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/

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/

在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);
相关文章：