javascript - jQuery 链接与动画函数的回调

Question

假设我有一些要设置动画的元素:

$('.hey').show(1000).slideUp(1000);

这和有什么区别:

$('.hey').show(1000, function() {
  $(this).slideUp(1000);
});

就内部发生的事情而言？据我所知，动画在 jQuery 中是异步的。所以第一个例子，show 和 slideUp 应该同时触发。在第二个中，slideUp 应该仅在 show 结束后触发。

然而，出于某种原因，人们喜欢 on this answer说他们是“相同的”。尽管(显而易见的)它们的工作方式不同(在第一个示例中，返回将立即发生，与第二个示例不同)，但为什么它们是相同的？

Answer 1

Yet, for some reason, people like on this answer say they're the "same".

你是对的，他们不是。如果不止一个元素匹配.hey，它们之间的区别特别大。但是对于您引用的代码，尽管它们采取的步骤顺序不同，但它们最终做的事情几乎相同。

Why are they same despite the (obvious) fact they work different (in the first example, the return will happen immediately, unlike with the second one)?

在这两个示例中，代码都会立即运行并完成(“返回”)。

在第一个示例中，对 slideUp 的调用立即发生但是 jQuery 通过将 slideUp 动画添加到动画队列的末尾并返回来处理该调用；实际的 slideUp 稍后发生，当到达动画队列时。

在第二个示例中，对 show 的调用立即发生，稍后当动画完成时，对 slideUp 的调用完成。

多个元素与您的选择器匹配时的主要区别在于，在您的第一个示例中，一次调用slideUp，它将 slideUp 操作添加到动画队列中您调用它的 jQuery 对象中的当前元素集。在第二个，有多次完成回调调用，每个元素完成时调用一次。

Arun P Johny 强调了另一个非常重要的区别在 the comments : 如果您稍后要向这些相同的元素添加另一个动画函数，对于第一个示例，它会被添加到队列之后 slideUp ，但在第二个示例中，slideUp 将在其他动画之后。

但是对于您引用的代码，虽然他们采取不同的道路到达那里，但他们最终做的事情几乎相同。