javascript - 是什么决定了 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

加上：

文森特是对的，执行实际上是

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

你看到的是效果的结果

1. 将 p 附加到 #bar（已执行）
2. 隐藏 #foo 中的 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

很确定它是按照您调用它的顺序执行的，它可能会开始隐藏部分，稍后它会附加到另一个元素但动画部分已经开始，它需要超过一毫秒，因为您将其设置为“慢”它的不透明度从 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 5

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

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

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

Answer 6

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

Answer 7

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