DEMO

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/

Answer 2

你可以写一个插件让它等你。

DEMO

$.fn.q = function(fn) {
    var that = this, arg = Array.prototype.slice.call(arguments, 1);

    return this.queue(function(next) {
        that[fn].apply(that, arg);
        next(); 
    });
};

用法：

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

Answer 3

尝试一下：

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

简单的jQuery Chaining洞察力

3 个答案:

DEMO