了解 $.promise 的工作原理类似于 transitionEnd答案

【问题标题】：understanding how $.promise works similar to transitionEnd了解 $.promise 的工作原理类似于 transitionEnd
【发布时间】：2015-09-26 01:37:03
【问题描述】：

我只是在jQuery.promise() 的文档页面上乱七八糟，遇到了以下代码：

$("button").on("click", function () {
    $("p").append("Started...");

    $("div").each(function (i) {
        $(this).fadeIn().fadeOut(1000 * (i + 1));
    });

   $("div").promise().done(function () {
        $("p").append(" Finished! ");
    }); 
});

FIDDLE HERE

现在我明白 jQuery 中的 $.defer 有助于异步编程，我也明白 $.done 和 $.fail 是 $promise 对象的一部分。

我读过一篇有趣的文章HERE。有几个很好的例子说明如何使用 $.defer 来监控 css-3 转换。

但是，在我提供的小提琴示例中，我无法理解 $.promise 如何获取转换完成的事实。 Promise 是如何发现淡出（）已经完成的？

下面的代码是如何真正工作的？

$("div").promise().done(function () {
            $("p").append(" Finished! ");
        });

promise 是如何在这里真正发挥作用的？谁能解释一下？

【问题讨论】：

因为集合 ($('div')) 中匹配元素上的所有动画默认都放在 fx 队列中，为每个动画使用一个延迟对象，该对象在动画完成时解析。一旦队列为空，并且 queueHooks 中的所有延迟对象都被解析，promise done() 回调就会被触发。
我添加了promise 标签（还有动画，但是......）因为我猜有一些承诺的专家可以更好地解释它
@A.Wolff 没有问题！谢谢:)
附带说明，这将是顺序处理动画的更好方法：jsfiddle.net/xn9xzyx6 请参阅stackoverflow.com/a/27660144/1414562

标签： javascript jquery animation promise

【解决方案1】：

简单地说，jQuery 在$("div") 选择器返回的每个对象上创建一个延迟对象队列（这些可以使用.data() 函数查看）。
当您使用 jQuery 函数（例如 fadeIn() 或 fadeOut()）向 div 添加一些 CSS 动画时，它会创建附加到每个单独的 div 队列的 Deferred 对象。在父集合上使用$("div").promise().done() 可以检查所有子延迟对象队列是否为空（jQuery 将迭代子元素）。

【讨论】：

【解决方案2】：

我没有深入研究 jQuery 源代码，但这是我的理解。

$.promise 返回一个 Promise，它在某种类型的所有操作都结束后完成。默认情况下，“类型”是fx (source)。当fx 队列为空时，promise 将解析。

在您的小提琴中，您调用fadeIn()，它将动画添加到fx 队列。（$.fadeIn() 默认具有 queue: true。）$.fadeOut 也是如此。

当队列为空时，promise 将解析。 This fiddle 会支持这一点。（动画运行时队列处于“进行中”，但 100 毫秒后为空。） A slightly more convoluted fiddle - 注意当我们使用 $(el).queue('fx',[]); 清除 fx 队列时，promise 是如何完成的？

【讨论】：