简单的jQuery Chaining洞察力

Question

我以为我理解了jQuery的链接能力,但现在我有点困惑.

使用淡出DIV然后将其删除的示例:

• 通过jQuery链接逻辑,我应该能够做到:

  $(this).parent().fadeOut(500).remove();
  

但相反,我必须这样做:

$(this).parent().fadeOut(500,function() { $(this).remove(); });

这是为什么？谢谢!

Answer 1

您无法立即调用.remove(),因为该.fadeOut()操作是一个异步操作,它立即返回(在它刚刚启动动画之后),但是继续通过定时器执行.当.fadeOut()返回和下一个链接操作执行时,动画刚刚开始 - 它还没有完成.如果.remove()使用正常链接执行,则在动画取得进展之前立即将其删除.

因此,正如您所发现的那样,您必须等到为动画调用完成回调,然后才能将其删除.

一个例外是附加的链式动画调用.您可以链接动画,因为动画是进入动画队列的特殊情况.动画启动后,后续动画调用会看到正在进行动画,并且它们会进入内部队列.当第一个动画结束时,它会检查动画队列以查看是否有更多链式动画要启动.

几乎所有javascript中的异步操作都是非阻塞的.这意味着启动它们的调用只是 - 启动它们的调用.然后该调用立即返回,其余操作通过定时器或其他事件继续进行,随后的javascript继续执行(包括其他链接方法).您只能通过注册完成回调来了解操作实际完成的时间.

ajax操作,图像加载等也是如此......

你让我思考如何让.remove()方法在动画队列中运行.实际上可以通过创建像这样的新版本的remove()来做到这一点:

$.fn.fxRemove = function() {
    this.queue(function(next) {
        $(this).remove();
        next();
    });
    return(this);
}

这种删除形式进入动画队列,并在动画链接完成之前执行.那么,你可以使用:

$(this).parent().fadeOut(500).fxRemove();

这里有一个有效的例子:http://jsfiddle.net/jfriend00/3Hg6G/