为什么可以链接 jquery 效果，而不是使用回调答案

【问题标题】：why is ok to chain jquery effects, instead of using callbacks为什么可以链接 jquery 效果，而不是使用回调
【发布时间】：2017-06-06 23:14:20
【问题描述】：

在 jquery 文档中声明，如果要在对选择应用效果后添加一个类，则必须使用回调：

// Fade in all hidden paragraphs; then add a style class to them (not quite right)
$( "p.hidden" ).fadeIn( 750 ).addClass( "lookAtMe" );

// Fade in all hidden paragraphs; then add a style class to them (correct with animation callback)
$( "p.hidden" ).fadeIn( 750, function() {
// this = DOM element which has just finished being animated
$( this ).addClass( "lookAtMe" );
});

但是，您可以链接两个效果而不需要使用回调：

$(".something").fadeOut().fadeIn();

这是为什么呢？你不应该也使用这样的回调吗：

$( ".something" ).fadeOut( 750, function() {
   $( this ).fadeIn();
});

【问题讨论】：

这是一条重要线索：learn.jquery.com/effects/queue-and-dequeue-explained
尝试链接一个需要时间的效果，看看会发生什么。基本上它归结为你想要应用链中的下一个东西的时间。立即，或在前一件事完成后。
需要注意的是，当没有将持续时间传递给jQuery动画方法时，其行为与将持续时间传递给方法的行为不同。

标签： javascript jquery animation effects

【解决方案1】：

据我了解，当您执行诸如fadeIn/fadeOut 之类的操作时，您所做的是创建一个放置在内部动画队列上的请求，该队列以先进先出的方式执行这些操作。其他人可以更详细地说明这一点，但由于它是这样工作的，因此不需要使用回调。

【讨论】：

这是事实，也是这种（公认方便）方法不受欢迎的原因之一。这是一个非常严重的副作用，并且难以理解/管理。回调方法很好，但在语法方面很笨拙，这就是人们喜欢 jQuery 链接的原因。如果今天实现，肯定会是基于 promises 的，这样可以在不添加特殊队列的情况下使序列简洁（例如(await $thing.fadeOut()).fadeIn()）

【解决方案2】：

回调对异步操作有意义。所以回调是如果你想在淡入淡出完成后发生一些事情。在您的情况下，后续链接的 .addClass() 不会等待褪色完成。它立即发生。

【讨论】：

再补充一点：jQuery 通过在调用中返回对象来实现链。这就是为什么您可以链接调用，这是同步行为。

【解决方案3】：

因为，简单地说，对.fadeIn 的调用不会等待。它所做的只是将效果添加到队列中，然后继续使用您拥有的任何其他代码。 jQuery 文档的意思是，如果你想在效果完成后向元素添加一个类（他们只是用作示例），你将不得不使用回调，它在最后被调用效果。

此外，您绝对可以通过使用回调来链接两个效果，但这是不必要的输入量（并且开发人员通常会尽可能地懒惰）。它可以在没有回调的情况下将两个效果链接在一起的原因是调用.fadeIn 或.fadeOut 会将适当的效果添加到 jQuery 的 DOM 元素效果队列中。效果从队列中依次播放一次，因此无论您将它们添加到队列中的速度有多快，它们都将始终以正确的速度和时间播放。

【讨论】：