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

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

<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点击

隐藏#foo
的p元素追加p到#bar
显示p这是现在#bar

实际结果的子

追加p到#bar
隐藏#foo的p元素
显示p这是现在的#bar

问题

什么决定的方法在jQuery的链执行顺序一个孩子？
如何确保每个事件在下次启动前完成？

来源

2009-10-21 Beau Smith

只是好奇，你是如何追踪执行顺序的？视觉或Firebug类型的调试器？ – 2009-10-21 00:40:32

视觉，现在有道理。 – 2009-10-21 18:40:45

如果你想等到每个动画做下一步之前完成时，使用动画回调详见the documentation：

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

来源

2009-10-21 00:46:22

我喜欢重新编码原始代码的想法，以防止“异步”症状;但保持一个单一的声明。 – 2009-10-21 04:51:22

这不回答被问到的问题（它回答提示用户提问的问题）。 – 2012-05-16 10:23:47

预期结果是正确的。观察到的行为可能是隐藏（'慢'）的结果，其异步运行。所以它在下一个动作执行时运行。所以看起来好像p是先附加到#bar。你可以尝试隐藏（）而不用慢慢看看是否有所作为。

来源

2009-10-21 00:41:33

你不是指*异步*吗？（但你答案的实质是正确的。） – 2009-10-21 00:43:06

我相信他确实是异步的。我在一些应用程序中观察到类似的行为，这些应用程序具有某种动画，然后是相同或不同节点的DOM操作。 – 2009-10-21 00:53:29

Aye ...异步=同时，正是我的意思。会相应更新。 – 2009-10-21 01:45:55

很确定它是按照您调用的顺序执行的，它可能启动隐藏部分，稍后它将追加到该其他元素，但动画部分已经开始，因为您设置它需要超过一毫秒到“缓慢”，并且在1到0的不透明度范围内跳跃，从毫秒级的1到0.9到0.8。

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

来源

2009-10-21 00:42:38

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

要添加：

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

开始隐藏p元素在#foo （缓慢地）
追加p来#bar（在快照中）
开始显示p，它现在是#bar的小孩（慢）

你看到的是什么效果

追加p来#bar结果（执行）
隐藏#foo （完成）
节目P中的p元素现在是一个#bar 的孩子（已完成）

来源

2009-10-21 00:43:06

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

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

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

来源

2009-10-21 00:43:11 Amber

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

来源

2009-10-21 00:45:18

你必须使用回调，如果你想排队后，运行的其他方法显示出像“Sixten Otto”这样的说法。 show hide的动画不会等待追加方法执行。它与setInterval启动一个单独的线程，同时，调用其他代码。所以你得到的结果并不意外。

来源

2009-10-21 02:04:06 Mahbub

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

回答

相关问题