如何判斷jQuery執行函數的次序

Question

我今天開始學習jQuery，並且遇到了一個問題，我的印象是你在jQuery中編寫代碼的順序是它執行的順序，顯然我錯了。例如，我想告訴它將我的文本改爲藍色，然後將其改爲紅色。我無法讓它工作，因爲它似乎爲元素而鬥爭（我的猜測是它在所有功能同時運行），即使我拖延了。對此有何想法？

這裏是我的代碼：http://jsfiddle.net/jZUzP/

$(document).ready(function(){ 
    $(".post").css({"color":"#0000FF"}) 
       .delay(800) 
       .css({"color":"##FF0000"});  
}); 

Answer 1

在一般意義上的jQuery代碼中出現的順序執行，同其他任何JavaScript代碼。但是，使用setTimeout()或Ajax的函數可能會在延遲後執行某些操作。

在您的問題的代碼中，您使用的是.delay() method，它只爲jQuery animation effects添加延遲，並且.css()方法不參與動畫。正如費利克斯的評論所指出的那樣，這兩個CSS變化緊接着彼此發生，太快而看不到第一種顏色。

更具體地說，你的第一個.css()調用發生，那麼.delay()調用發生，但它的作用是延遲添加到動畫隊列，然後立即返回，然後你的第二個電話.css()發生。如果你排隊等待其他動畫效果，它們會在延遲之後發生。瀏覽器在單個線程中運行JavaScript，因此您不會同時運行兩個代碼塊 - 請注意，該單線程也是瀏覽器用於呈現的線程（這就是爲什麼長時間運行的循環會使瀏覽器無響應）。

所以，你可能自然會問，沒有辦法改變css設置的方式參與jQuery的動畫過程嗎？那麼是的，你可以使用.animate()方法 - 除了它不適用於顏色。至少，不是默認的。但是，如果包括jQuery UI擴展到jQuery的然後你可以使用.animate()改變顏色如下：

$(document).ready(function() { 
    $(".post").animate({ 
     "color": "#0000FF" 
    }, 0).delay(800).animate({ 
     "color": "##FF0000" 
    }, 0); 
}); 

演示：http://jsfiddle.net/jZUzP/1/

注意的是，上述所謂.animate()爲0的持續時間，以便顏色變化將是瞬間的。

延伸閱讀：

• jQuery standard .animate() doco
• jQuery UI .animate() doco

如果你不希望包括jQuery的用戶界面，以及jQuery的只是一些簡單的像這樣當然也可以使用（非jQuery，標準JS）setTimeout() function排隊你的第二個CSS變化：

$(document).ready(function(){ 
    var $post = $(".post").css({"color":"#0000FF"}); 
    setTimeout(function() { 
     $post.css({"color":"##FF0000"}); 
    }, 800); 
}); 

（jQuery動畫效果在內部使用setTimeout()。）