什么决定了 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. 隐藏 #foo< 中的 p 元素/code>
2. 将 p 附加到 #bar
3. 显示 p 现在是 #bar 的子级

实际结果

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

问题

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

Answer 1

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

至添加：

Vincent 是对的，执行实际上是

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

您看到的是效果

1. 附加 p 到 #bar （执行）
2. 隐藏 # 中的 p 元素 的结果富
   （已完成）
3. 显示 p 现在是#bar 的子级
   （完全的）

Answer 2

预期结果是正确的。观察到的行为可能是 hide('slow') 异步运行的结果。因此它会在下一个操作执行时运行。所以看起来好像 p 首先附加到 #bar 上。你可以尝试 hide() 而不用放慢速度，看看是否有区别。

Answer 3

如果您想等到每个动画完成后再执行下一步，请使用文档：

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

Answer 4

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

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

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

Answer 5

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

Answer 6

很确定它是按照您调用它的顺序执行的，它可能会启动隐藏部分，然后一瞬间它会附加到另一个元素，但动画部分已经开始，它需要超过一毫秒的时间，因为您将其设置为“慢”它的不透明度从 1 跳到 0，例如从 1 到 0.9 再到 0.8（毫秒）。

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

Answer 7

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