функция 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

В JQuery, вы не можете переплетать анимации и не-анимации в том, как вы doi и ожидайте, что они будут работать в правильном порядке. Анимации перейдут в очередь анимации и будут упорядочены один за другим, но не-анимации будут выполняться немедленно. Таким образом, все будет не в правильном порядке.

Чтобы сделать что-то подобное, вы можете использовать такой код.

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); 

Answer 3

Ваш while цикл завершает выполнение до ДИВ имел шанс выцветает вне. Используйте 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 4

Ваш цикл, а заканчивает очень быстро; вместо этого вы должны дождаться завершения анимации до начала следующего. Это легко сделать, добавив функцию обратного вызова в 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/