理解$.prope的工作原理类似于transitionEnd

understanding how $.promise works similar to transitionEnd

本文关键字：类似于 transitionEnd 工作 prope 理解      更新时间：2023-09-26

我只是在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! ");
    }); 
});

小提琴在这里

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

我在这里读了一篇有趣的文章。关于$.dedefer如何用于监视css-3转换，有几个很好的例子。

然而，在我提供的fiddle示例中，我不明白$.prouise是如何获得转换完成这一事实的。promise是如何获取fadeout((完成的？

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

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

promise在这里是怎么运作的？有人能解释一下吗？

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

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

$.prope返回一个promise，该promise在某一类型的所有操作结束后完成。默认情况下，"类型"为fx(源(。当fx队列为空时，promise将解析。

在小提琴中，调用fadeIn()，它会将动画添加到fx队列中。(默认情况下，$.fadeIn()具有queue: true。($.fadeOut也执行相同操作。

当队列为空时，promise将解析。这把小提琴可以支持这一点。(动画运行时，队列处于"进程中"状态，但100毫秒后为空。(稍微复杂一点的问题是，注意到当我们使用$(el).queue('fx',[]);清除fx队列时，promise是如何完成的？

相关文章：