javascript - 了解 $.promise 的工作方式类似于 transitionEnd

Question

我只是在 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 转换。

但是在我提供的 fiddle 示例中，我无法理解 $.promise 如何获取转换已完成的事实。 promise 如何判断 fadeout() 已完成？

下面这段代码是如何工作的？

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

promise 在这里如何运作？谁能解释一下？

Answer 1

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