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中，你不能以你自己的方式交織動畫和非動畫並期望他們以正確的順序運行。動畫將進入動畫隊列並在那裏依次排序，但非動畫將立即運行。因此，事情不會以正確的順序發生。

要做類似你想做的事情，你可以使用這樣的代碼。

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()和​​完成功能來進行接下來的步驟。以下是它的工作方式：

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

Answer 3

你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 4

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/