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转换的好例子。

然而，在我提供的小提琴示例中，我无法理解$ .promise如何理解过渡完成的事实。承诺如何获得fadeout（）完成？

以下代码如何真正起作用？

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

承诺如何在这里真正起作用？谁能解释一下？

Answer 1

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

Answer 2

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

$ .s promise返回一个Promise，一旦某个类型的所有动作都结束，它就会完成。默认情况下，“类型”为fx（source）。当fx队列为空时，承诺将解决。

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

当队列为空时，承诺将解决。 This fiddle会支持这一点。（在动画正在运行时，队列是'进展'，但在100毫秒后空了。） A slightly more convoluted fiddle - 请注意当我们使用fx清除$(el).queue('fx',[]);队列时承诺如何完成？

了解$ .promise如何与transitionEnd类似

2 个答案: