是什么决定的方法在jQuery的链执行顺序？(What determines the executi

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:

如果你想等到每个动画做下一步之前完成，使用中详述的动画回调的文档 ：

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

Answer 2:

为了确保您执行类似隐藏或显示效果后，使用回调。 http://docs.jquery.com/Effects/show#speedcallback

加上：

文森特是正确的，执行实际上是

1. 开始躲在#foo p元素（缓慢地）
2. 附加p来#bar（以卡扣）
3. 开始显示P，其是现在#bar的子（缓慢地）

你所看到的是效果的结果

1. 附加p来#bar（执行）
2. 隐藏在#foo p元素（已完成）
3. 节目P，其现在是#bar的孩子（已完成）

Answer 3:

预期的结果是正确的。 所观察到的行为可能是隐藏（“慢”），该异步运行的结果。 所以它运行，而下一个动作执行。 因此，它看起来好像p被追加首先#bar。 你可以尝试隐藏（）不慢，看看是否有差别。

Answer 4:

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

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

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

Answer 5:

隐藏是异步的。 如果你想等待它完成，你需要把所有你想要后，碰到你传递给隐藏作为参数的回调函数的代码。

Answer 6:

肯定它的在执行时的顺序执行的，它可能开始隐藏部分和一秒钟后它附加到其他元素，但动画部分已经开始，它需要更长的时间超过一毫秒，因为你把它设置为“慢”和它的跳跃不透明度从1到0，以毫秒为单位，从1说要1.9至0.8。

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

Answer 7:

你有，如果你想要一个像“Sixten奥托”曾表示要排队的显示隐藏的事情后运行其他方法使用回调。 显示隐藏的动画不会等待追加的方法来执行。 而在此期间，其他代码调用它开始的setInterval一个单独的线程。 所以，你得到的结果并不意外。

文章来源: What determines the execution order of methods in jQuery chains?