.promise（）

Question

在Web应用程序中，我使用.each()来迭代一组项目。

在函数体中，我正在寻找一个我想用动画显示或隐藏的特定项目。

这很好用。但是，我想在所有动画结束时只发射一次函数。

我该怎么做？

我创建了一个jsFiddle来说明问题。

基本上，我有类似的东西：

<button id="x">Show</button>
<ol>
    <li><span style="display:none">One</span>

    </li>
    <li><span style="display:none">Two</span>

    </li>
    <li><span style="display:none">Three</span>

    </li>
    <li><span style="display:none">Four</span>

    </li>
</ol>
<pre id="log">
</pre>

和js：

$(function () {

    $("#x").click(function () {
        $("li").each(function () {
            $(this).find("span").show({
                complete: function () {
                    $("#log").append("completed\n");
                }
            }).promise().done(function () {
                $("#log").append("done\n");
            });
        });    
    });
});

在这种情况下，“completed”和“done”都被推送到log元素。

当所有动画都已结束时，我想只调用一次“完成”功能。

我该怎么做？

PS：我知道我的代码段可以写成：$("li > span").show(...)，但each构造代表我的真实代码。

[edit]必须保留.each关键字，因为我的实际代码是使用每个关键字构建的。我的代码片段只是为了表示问题而更简单

Answer 1

您必须将.promise()绑定到动画集合（跨度）。

jsFiddle Demo

$("li").each(function () {
    $(this).find("span").show({
        complete: function () {
            $("#log").append("completed\n");
        }
    })}).find("span").promise().done(function () {
        $("#log").append("done\n");
    });

.promise（）

.promise（[type] [，target]）

退货：承诺

说明：返回一个Promise对象，以观察特定类型的所有操作绑定到集合，排队与否，   结束。

Answer 2

将延迟存储在数组中，并使用它来查看所有动画何时完成：

$(function () {
    $("#x").click(function () {
        var arr = [];
        $("li").each(function() {
            var def = $(this).find("span").show('slow', function () {
                $("#log").append("completed\n");
            });
            arr.push(def)
        });
        $.when.apply($, arr).then(function () {
            $("#log").append("done\n");
        });
    });
});

FIDDLE

Answer 3

试用简单版

$("li span").show({
    complete: function () {
        $("#log").append("completed\n");
    }
}).promise().done(function () {
    $("#log").append("done\n");
});

演示：Fiddle

使用.each（），如何等待动画结束？

3 个答案:

.promise（）