理解$.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! ");
    }); 
});

小提琴在这里

现在我确实理解了$.defer在jQuery中帮助异步编程，我也理解$.done和$.fail是$promise对象的一部分。

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

然而，在我提供的小提琴示例中，我无法理解$.promise如何理解转换已经完成这一事实。承诺是如何发现fadeout()已经完成的？

下面的代码到底是如何工作的？

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

承诺在这里是如何运作的？有人能解释吗？

Answer 1

简单地说，jQuery在$("div")选择器返回的每个对象上创建了一个延迟对象队列(使用.data()函数可以看到这些对象)。

当您向带有jQuery函数(如fadeIn()或fadeOut() )的div添加一些CSS动画时，它会创建附加到每个div队列的延迟对象。在父集合上使用$("div").promise().done()可以检查所有延迟对象队列是否为空(jQuery将迭代子元素)。

Answer 2

我还没有钻研jQuery源代码，但我的理解是这样的。

$.promise返回一个承诺，一旦某个类型的所有操作都结束，它就会完成。默认情况下，'type‘是fx (来源)。当fx队列为空时，承诺将解析。

在您的小提琴中，您调用fadeIn()，它将动画添加到fx队列中。(默认情况下$.fadeIn()有queue: true。) $.fadeOut也是这样做的。

当队列为空时，承诺将解析。这把小提琴会支持这一点。(动画运行时，队列为“inprogress”，但在100 is之后为空。) 稍微复杂一些的小提琴 --注意当我们使用$(el).queue('fx',[]);清除fx队列时，承诺是如何完成的。