Javascript 什么决定了jQuery链中方法的执行顺序？

HTML代码

<div id="foo">
    <h1>foo</h1>
    <p>Pellentesque habitant morbi tristique.</p>
</div>
<div id="bar">
    <h1>bar</h1>
</div>

$('#bar').click(function () {
    $('#foo p').hide('slow').appendTo('#bar').show('slow');
})

预期结果

单击#栏时

在

#foo

将

p

附加到

#条

显示

p

它现在是

#bar的子项

实际结果

将

p

附加到

#条

在

#foo

显示

p

它现在是

#bar的子项

问题

• 什么决定了jQuery链中方法的执行顺序
• 如何确保每个事件在下一个事件开始之前完成

---

预期结果是正确的。观察到的行为可能是隐藏（'slow'）异步运行的结果。因此，它在执行下一个操作时运行。因此，看起来好像p首先附加到了#bar。您可以尝试使用hide（）而不必使用慢速键，以查看这是否会产生影响。

非常确定它是按照您调用它的顺序执行的，它可能会启动隐藏部分，并在一瞬间将其附加到另一个元素，但动画部分已经开始，它需要超过一毫秒的时间，因为你把它设置为“慢”，它的不透明度从1跳到0，从1到.9到.8毫秒

$.fn.hide = function() { alert('hiding'); return this; };
$.fn.appendTo = function() { alert('appending To') }
$('body').hide().appendTo('html')

---

要确保在隐藏或显示等效果之后执行某些操作，请使用回调。

添加：

文森特是对的，死刑实际上是

开始在#foo中隐藏p元素 （慢慢地）

将p附加到#条（在快照中）

开始显示p，它现在是#bar的子对象（慢慢地）

你看到的是效果的结果

将p附加到#条（已执行）

在#foo中隐藏p元素 （已完成）

显示p，它现在是#bar的子对象 （已完成）

show（）

和

hide（）

实际上是动画效果，但当没有传递参数时，它们使用“瞬间”持续时间。但是，由于它们是作为动画实现的，这意味着它们不会与功能链同步执行。因此，您真正应该使用的是对

hide（）

调用的回调，以触发一个回调函数，该函数调用

append（）

，然后调用

show（）

---

隐藏是异步的。如果要等待它完成，则需要将要在它之后运行的所有代码放入回调函数中，并将其作为参数传递隐藏

如果要等到每个动画完成后再执行下一步，请使用中详细介绍的动画回调：

---

如果您想对show hide之后运行的其他方法（如“Sixten Otto”）进行排队，则必须使用callback。show hide的动画不会等待append方法执行。它用setInterval启动一个单独的线程，同时调用其他代码。所以你得到的结果并不意外

只是好奇，你是如何追踪执行顺序的？直观的还是Firebug类型的调试器？直观的，现在有意义了。你不是指异步的吗？（但你回答的实质是正确的。）我相信他的意思是不同步的。我在我的一些应用程序中观察到类似的行为，这些应用程序具有某种动画，然后对相同或不同的节点进行DOM操作。是的……异步=同时也是我的意思。这让我想起了Joel的“回到基础”和“泄漏的抽象”文章。我喜欢对原始代码重新编码以防止“异步”症状的想法；但是只保留一条语句。这并没有回答所问的问题（它回答了提示用户问题的问题）。

$('#bar').click(function () {
  $('#foo p').hide('slow', function(){
    $(this).appendTo('#bar').show('slow');
  });
});