blocks|key|2617340|text|如果要等到每个动画完成后再执行下一步，请使用文献资料中详细介绍的动画回调。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2617341|$('#bar').click(function+()+{
++$('#foo+p').hide('slow',+function(){
++++$(this).appendTo('#bar').show('slow');
++});
});|code-block|syntax|javascript|2617342|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Effects^0|M|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

If you want to wait until each animation completes before doing the next step, use the animation callbacks detailed in <a href="http://docs.jquery.com/Effects" rel="nofollow noreferrer">the documentation</a>:

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

blocks|key|1092531|text|若要确保在“隐藏”或“显示”等效果之后执行某项操作，请使用回调。http://docs.jquery.com/Effects/show#speedcallback|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1092532|To+Add:|style|BOLD|1092533|文森特是对的，实际上|1092534|开始在#foo中隐藏p元素(慢慢地)|ordered-list-item|1092535|将p附加到#bar+(一张快照)|1092536|开始显示p，它现在是#bar的一个子类(慢慢地)|1092537|你看到的是效果的结果|1092538|将p附加到#bar+(已执行)|1092539|在#foo中隐藏p元素(已完成)|1092540|显示p，它现在是#bar的子级(已完成)|1092541|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Effects/show#speedcallback^0|W|1D|0|0|0|7|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|D|3|E|5|6|7|1A|8|@$A|1B|B|1C|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1D|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1E|8|@]|9|@]|C|$]]|$1|M|3|N|5|L|7|1F|8|@]|9|@]|C|$]]|$1|O|3|P|5|L|7|1G|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1H|8|@]|9|@]|C|$]]|$1|S|3|T|5|L|7|1I|8|@]|9|@]|C|$]]|$1|U|3|V|5|L|7|1J|8|@]|9|@]|C|$]]|$1|W|3|X|5|L|7|1K|8|@]|9|@]|C|$]]|$1|Y|3|-4|5|6|7|1L|8|@]|9|@]|C|$]]]|Z|$10|$5|11|12|13|C|$14|15]]]]

To ensure you execute something AFTER an effect like hide or show, use a callback.
<a href="http://docs.jquery.com/Effects/show#speedcallback" rel="noreferrer">http://docs.jquery.com/Effects/show#speedcallback</a>

To Add:

Vincent is right, the execution is actually

<ol>
<li>start hiding the p element in #foo
(SLOWLY)</li>
<li>append p to #bar (in a snap)</li>
<li>start showing p which is now a child of #bar (SLOWLY)</li>
</ol>

What you saw was the result of the effect

<ol>
<li>append p to #bar (executed)</li>
<li>hide the p element in #foo
(COMPLETED)</li>
<li>show p which is now a child of #bar
(COMPLETED)</li>
</ol>

blocks|key|1092467|text|预期的结果是正确的。观察到的行为可能是运行asynchronously.的隐藏(“慢速”)的结果因此，它在执行下一个操作时运行。因此，似乎p首先被附加到#bar中。您可以尝试隐藏()，而不用慢慢来看这是否有区别。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1092468|entityMap^0|L|E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

The expected result is correct. The observed behaviour may be a result of hide('slow') which runs asynchronously. So it runs while the next action executes. So it appears as if p is appended to #bar first. You can try hide() without the slow to see if that makes a difference.

blocks|key|2617198|text|非常确定它是按照调用它的顺序执行的，它可能启动隐藏部分，并在一秒钟后被追加到另一个元素，但是动画部分已经开始了，它花费的时间超过一毫秒，因为您将它设置为“慢速”，并且它在不透明度上从1跳到0，从1跳到.9，以毫秒计从.8跳到了.8。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2617199|$.fn.hide+=+function()+{+alert('hiding');+return+this;+};
$.fn.appendTo+=+function()+{+alert('appending+To')+}
$('body').hide().appendTo('html')|code-block|syntax|javascript|2617200|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Pretty sure it's executed in the order you invoke it, it probably starts the hide part and a split second later it's appended to that other element but the animation part has already begun, it takes longer than a millisecond because you set it to 'slow' and it's jumping in opacity from 1 to 0, going from say 1 to .9 to .8 in milliseconds.

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

blocks|key|1092572|text|show()和hide()实际上是动画效果，但是当不传递参数时，它们使用“即时”持续时间。但是，由于它们是作为动画实现的，这意味着它们不与功能链同步执行。因此，您真正应该使用的是hide()调用的回调，以触发一个回调函数，该回调函数调用append()，然后调用show()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1092573|http://docs.jquery.com/Effects/show|1092574|http://docs.jquery.com/Effects/hide|1092575|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|6|7|6|2H|6|3A|8|3N|6|0|0|Z|0|0|0|Z|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|H|3|I|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|J|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|G]]|Q|$5|M|N|O|E|$P|I]]]]

<code>show()</code> and <code>hide()</code> are actually animation effects but when no arguments are passed they use an "instant" duration. However, due to the fact that they're implemented as animations, that means that they don't execute synchronously with the function chain. Thus, what you really should be using is a callback off of the <code>hide()</code> call to trigger a callback function which calls <code>append()</code> and then <code>show()</code>.

<a href="http://docs.jquery.com/Effects/show" rel="nofollow noreferrer">http://docs.jquery.com/Effects/show</a>

<a href="http://docs.jquery.com/Effects/hide" rel="nofollow noreferrer">http://docs.jquery.com/Effects/hide</a>

blocks|key|1092597|text|隐藏是异步的。如果您想等待它完成，您需要将您想要在它之后运行的所有代码放入一个回调函数中，以隐藏为一个参数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1092598|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Hide is asynchronous. If you want to wait for it to finish, you need to put all the code you want to run after it into a callback function that you pass to hide as a parameter.

blocks|key|1077154|text|你必须使用回调，如果你想排队，其他方法运行后，显示隐藏的事情，如“六十奥托”说。显示隐藏的动画不会等待追加方法的执行。它用setInterval启动一个单独的线程，同时调用其他代码。所以你得到的结果并不是意料之外的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1077155|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You have to use callback if you want to queue the other methods run after the show hide thing like "Sixten Otto" has said. The animation of show hide will not wait for append method to execute. It starts a separate thread with setInterval while in the meantime, other code is invoked. So the result you got is not unexpected.

HTML Code

<pre><code>&lt;div id="foo"&gt;
 &lt;h1&gt;foo&lt;/h1&gt;
 &lt;p&gt;Pellentesque habitant morbi tristique.&lt;/p&gt;
&lt;/div&gt;
&lt;div id="bar"&gt;
 &lt;h1&gt;bar&lt;/h1&gt;
&lt;/div&gt;
</code></pre>

jQuery Code

<pre><code>$('#bar').click(function () {
 $('#foo p').hide('slow').appendTo('#bar').show('slow');
})
</code></pre>

Expected Result

When #bar is clicked

<ol>
<li>hide the <code>p</code> element in <code>#foo</code></li>
<li>append <code>p</code> to <code>#bar</code></li>
<li>show <code>p</code> which is now a child of <code>#bar</code></li>
</ol>

Actual Result

<ol>
<li>append <code>p</code> to <code>#bar</code></li>
<li>hide the <code>p</code> element in <code>#foo</code></li>
<li>show <code>p</code> which is now a child of <code>#bar</code></li>
</ol>

Questions

<ul>
<li>What determines the execution order of methods in jQuery chains?</li>
<li>How can I ensure that each event completes before the next starts?</li>
</ul>

What determines the execution order of methods in jQuery chains?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

HTML代码<div id="foo"> <h1>foo</h1> Pellentesque habitant morbi tristique.</div><div id="bar"> <h1>bar</h1></div>jQuery码$('#bar').click(function () { $('#foo p').hide('slow').appendTo

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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