如何判断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()。）