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

Question

HTML代码

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

jQuery代码

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

预期结果

点击#bar时

1. 隐藏p
中的#foo元素
2. 将p追加到#bar
3. 显示p，现在是#bar
的孩子

实际结果

1. 将p追加到#bar
2. 隐藏p
中的#foo元素
3. 显示p，现在是#bar
的孩子

问题

• 什么决定了jQuery链中方法的执行顺序？
• 如何确保每次活动在下次开始前完成？

Answer 1

为确保您在隐藏或显示等效果后执行某些操作，请使用回调。 http://docs.jquery.com/Effects/show#speedcallback

添加：

Vincent是对的，执行实际上是

1. 开始隐藏#foo中的p元素 （慢）
2. 将p附加到#bar（快照）
3. 开始显示p，现在是#bar（SLOWLY）的孩子

你看到的是效果的结果

1. 将p附加到#bar（已执行）
2. 隐藏#foo中的p元素 （已完成）
3. show p，现在是#bar的孩子 （已完成）

Answer 2

预期结果是正确的。观察到的行为可能是hide（'slow'）的结果，它以异步运行。因此它会在下一个动作执行时运行。所以看起来似乎首先将p附加到#bar。你可以尝试hide（）而不要慢，看看是否会产生影响。

Answer 3

如果您想在完成下一步之前等到每个动画完成，请使用the documentation中详述的动画回调：

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

Answer 4

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

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

Answer 5

show()和hide()实际上是动画效果，但是当没有参数传递时，它们会使用“即时”持续时间。但是，由于它们是作为动画实现的，这意味着它们不会与功能链同步执行。因此，您真正应该使用的是hide()调用的回调，以触发调用append()然后调用show()的回调函数。

http://docs.jquery.com/Effects/show

http://docs.jquery.com/Effects/hide

Answer 6

隐藏是异步的。如果你想等待它完成，你需要将你想要运行的所有代码放入一个回调函数中，并将其作为参数隐藏。

Answer 7

如果你想在“Sixten Otto”这样的show hide之后运行其他方法，你必须使用回调。 show hide的动画不会等待append方法执行。它使用setInterval启动一个单独的线程，同时调用其他代码。所以你得到的结果并不出乎意料。