Javascript 在同一jquery函数中，一行在前几行之前执行

这只是一个能帮我弄清楚一些基本情况的问题

我有一个简单的html页面，其中有两个div:#test和#testresult

这个写在单独的.js文件中的JQUERY包含在html页面中

$(document).ready(function () {
    var cssleft = $("#test");


    (function hhh() {

        cssleft.animate({
            left: "100px"
        }, 3000, function () {
            $('#testresult').html(cssleft.css("left"));
        }).animate({
            left: "-100px"
        }, 3000);

        cssleft.animate({
            width: "100px"
        }, 3000).animate({
            left: "10px"
        }, 3000);

        $('#testresult').html(cssleft.css("left"));

    })();
});

我不明白的是执行的流程

我希望这段代码一行一行地运行：

1/设置#test div的动画，然后在#testresult div中写入“left”值（100px）。 2/再次设置#test div的动画。 3/在#testresult div中写入新的'left'（10px）值

但是，只有在#testresult div被修改为：

$（'#testresult'）.html（cssleft.css（“左”））之后，1/和2/才会按预期运行就好像该行在前两行将0px放入#testresult div之前被激发一样

对此有什么解释吗？
简而言之，动画是一个异步函数。执行该行，但代码在执行下一行之前不会等待它完成

为了在动画完成时执行某些操作，应使用动画完成回调函数，如以下文档所示：

这就是在第一个动画中你在代码中所做的。但是，第二个动画没有使用完整的函数来运行该行：
$（'#testresult'）.html（cssleft.css（“左”）从技术上讲，Javascript是单线程的。但实际上，它确实具有并发性。或者，从我们人类的角度来看，有些东西似乎“同时运行”。例如，两个单独的
setinterval
s（一种在特定时间后以间隔运行代码的方法）“同时”为两个单独的对象设置动画”。当它运行时，我们可以有一个按钮，当点击时，输出文本


就javascript运行时而言，这是一个很好的解释。从这篇文章中可以看出：

while(queue.waitForMessage()){
  queue.processNextMessage();
}

那么让我们假设初始代码块将是第一条消息。它设置
onLoad
和一些
setinterval
。这将创建新消息。当页面最终加载时，它将被传递到要运行的队列。当超时超时时，它也将被发送到要运行的队列但在运行下一条消息之前，消息必须完成。所以看起来事情好像是同时发生的，但实际上，它只是在队列中运行的短消息

所以经典的例子是

它将输出
2,4,1,3，
。因此，发生的情况是，初始消息将运行，创建两个超时，当设置的时间过去时，将函数作为消息传递给队列（在本例中为0，这意味着它将立即发送到队列）

需要注意的是，消息应该很短。也许必须如此。但这并不能阻止您编写一个真正的大for循环，该循环遍历并处理巨大的2D数组，从而阻止您的代码（冻结所有内容），几秒钟后会导致“此页面无响应”或者，事实上，根据mozilla的文章，一个
alert（）
实际上会阻塞。因此，我将修改示例并添加，以看到它们停止执行





另外，特定于您的代码，jQuery增加了混乱，因为jQuery自动将动画排队。比较：

有了这个,

诚然，这段代码并不完全相同，可能会涉及回调。但我认为它说明了我的观点，
.animate
有一些神奇的队列

事实上，在结束之前，你最好看看前进的方向。这使得链接这些异步事件不再是疯狂的回调群集。
动画是异步的。对
.animate（）
的调用启动该过程，但它们不会等到动画完成。我在一篇文章中读到了这一点“JavaScript是单线程的，您一直在处理正常的同步代码流执行。"我认为这里发生的事情正好相反。也许我错过了一件事！！是的@JanR谢谢你我知道几乎每个jquery函数都有回调调用的可能性，那么我需要知道哪些jquery方法是同步的，哪些不是。有没有办法猜到呢？我猜文档并不总是很清晰r关于它，但我想通常任何具有完整回调选项的函数都可以被假定为异步的
setTimeout(function(){
   result.innerHTML+="1,";
},0); //wait time in ms

result.innerHTML+="2,";

setTimeout(function(){
   result.innerHTML+="3,";
},0); //wait time in ms

result.innerHTML+="4,";

$("#test").animate({"left":100},2000)
$("#test").animate({"top":100},2000)

var x=10;
setInterval(function(){
   x+=1
   test.style.left=x+"px";
},20)

var y=10;
setInterval(function(){
   y+=1;
   test.style.top=y+"px"
},20)