Функция 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 он вызывает функцию для запуска следующей итерации.

Если вы хотите задержку до fadeOut (дляубедитесь, что данное сообщение отображается в течение определенного промежутка времени), вы можете добавить его, добавив .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);