Question

我正在尝试调用自己的函数并等到它完成。转换结束后，我想开始下一个功能。请查看我的jsfiddle http://jsfiddle.net/hrm6w/

console.log（“upper finished”）应该在console.log（“promise finished”）之后启动，并且所有动画都已结束。

在每个对象的所有动画都结束后，我想开始下一个动作（函数）。

我认为promise（） - 函数就是我所需要的，但我只是不能让它工作。

任何帮助都将不胜感激。

Answer 1

玩了一下后，似乎你需要从过渡中返回承诺。我修改了一下，但结果相同。

本文帮助解释了一些概念：http://hermanradtke.com/2011/05/12/managing-multiple-jquery-promises.html

演示：http://jsfiddle.net/lucuma/hrm6w/5/

    (function($) {
    //Transition Out
    $.fn.ajaxTransitionOut = function() {

        var $animators = $('.animate', this);
        $animators.each(function() {
            $(this).animate({
            left: 1000,
            opacity: 0
        }, 400);
        console.log('animating');
                        });
        return $animators.promise().done(function() {
            console.log('promise finished');
        });

    };

})(jQuery);

$(document).ready(function() {
    console.log('starting');
    $.when($('#content').ajaxTransitionOut()).done(function() {
        console.log('upper finished');
    });
    console.log('ending');

});

Answer 2

我认为这很简单：

(function($) {
    $.fn.ajaxTransitionOut = function() {
        return this.find('.animate').each(function() {
            $(this).animate({
                left: 500,
                opacity: 0
            }, 4000);
        });
    };
})(jQuery);
$.when($('#content').ajaxTransitionOut()).done(function() {
    $('html').css('backgroundColor','#999');
});

小提琴 - http://jsfiddle.net/hrm6w/8/

您将看到我更改了常量和终端操作以更好地观察过程。

我承认我并不完全理解为什么会这样，但似乎所有选定元素的复合承诺都隐含在插件返回的jQuery对象中（因此可以在方法链的.done()中使用）。

我希望这只能起作用，因为我们正在处理动画，而承诺的默认type是'fx'（参见documentation for .promise()）。

编辑：

您也可以删除.when()并在方法链中使用.promise()生成明确的承诺，如下所示：

$('#content').ajaxTransitionOut().promise().done(function() {
    $('html').css('backgroundColor','#999');
});

插件保持不变。

jQuery承诺在每个函数中使用（）

2 个答案: