2017-06-06 161 views
3

在jQuery的文档确定链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(); 
}); 
+0

这里有一条重要的线索:https://learn.jquery.com/effects/queue-and-dequeue-explained/ –

+0

试着链接一个需要时间的效果,看看会发生什么。基本上可以归结为当你想要链条中的下一个东西时应用。马上,或之前的事情完成后。 – David

+0

应该指出,当没有持续时间传递给jQuery动画方法时,行为与传递给方法的持续时间不同。 – guest271314

回答

1

回调意义的异步操作。所以回调是如果你想在淡化完成后发生某些事情。在你的情况下,后续链接.addClass()不会等待衰落完成。它马上就会发生。

+0

只需添加更多:jQuery通过在调用中返回对象来实现链。这就是为什么你可以锁定呼叫,这是同步行为。 –

5

从我的理解,当你像淡入/淡出执行操作你正在做的是创建一个被放置在一个内部的动画队列,进行以FIFO方式行动的请求。其他人可以详细说明这一点,但因为它像这样工作,所以不需要使用回调。

+0

这是真的,这个(不可否认的方法)方法已经陷入了不利的原因之一。这是一个非常严重的副作用,难以理解/管理。回调方法很好,但在语法方面笨重,这就是人们喜欢jQuery链接的原因。如果今天正在实施中,那肯定的承诺为基础,这将使得顺序简洁不设置特别的队列(例如'($的await thing.fadeOut())。淡入()') –

1

因为,简单地说,调用.fadeIn不等待。它所做的只是将效果添加到队列中,然后继续使用其他任何代码。什么jQuery的文档的意思是,如果你想添加一个类的元素,一旦效果完全(他们只是使用为例),你必须使用回调,这就是所谓末的效果。

此外,你绝对可以链两所方面的影响,通过使用回调,但它是打字的不必要的量(和开发商通常的目标是尽可能的懒惰)。它的工作原理链两个效应在一起而不回调的原因是调用.fadeIn.fadeOut增加了jQuery的效果队列为DOM元素相应的效果。效果从一个队列中依次播放,所以无论您将其添加到队列中的速度有多快,它们都会以正确的速度和时间播放。