代码之家 › 专栏 › 技术社区 › Beau Smith

什么决定了jquery链中方法的执行顺序?

method-chaining jquery javascript

Beau Smith · 技术社区 · 16 年前

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');
})

预期结果

单击栏时

实际结果

问题

7 回复 | 直到 16 年前

Sixten Otto 16 年前

如果要等到每个动画完成后再执行下一步,请使用中详述的动画回调 the documentation :

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

o.k.w 16 年前

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

要添加:

文森特是对的,实际上处决

你看到的是效果的结果

Vincent Ramdhanie 16 年前

预期结果正确。观察到的行为可能是运行的hide(“slow”)的结果。 异步地 . 所以它在下一个操作执行时运行。因此,似乎P首先附加到了条上。您可以尝试hide()而不使用slow来查看这是否会产生影响。

Amber 16 年前

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

Gareth Simpson 16 年前

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

meder omuraliev 16 年前

很确定它是按照调用它的顺序执行的,它可能会启动隐藏部分,然后在一秒钟后附加到另一个元素,但动画部分已经开始,它需要超过一毫秒的时间,因为您将其设置为“慢”,并且它的不透明度从1跳到0,从1跳到.9跳到.8毫秒。

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

Mahbub 16 年前

如果您想在“sixten-otto”这样的“show-hide”之后对运行的其他方法进行排队,则必须使用回调。Show Hide的动画不会等待Append方法执行。它用setInterval启动一个单独的线程,同时调用其他代码。所以你得到的结果并不出乎意料。