jQuery：从函数中包含的 $.Deferred 获取解析

Question

如果我在一个函数中有一个带有多个链式承诺的 $.Deferred，并且我调用了该函数，我怎么知道该 Deferred 何时解决？例如：http://jsfiddle.net/5AWK4/

jQuery(function($){
    var $div = $('<div>hello world</div>').appendTo('body');

    var test = (function(){
        var dfd = new $.Deferred();
        dfd.then(function(){
            return $div.animate({width:300}, 5000, 'swing', function(){return $div.append('<br>line 1');});
        })
        .then(function(){
            return $div.append('<br>line 2');
        });
        return dfd.resolve();
    });

    $.when(test()).then(function(){
        $div.append('<br>line 3');
    });

});

当我运行该代码时，我有以下内容：

你好世界
第 3 行
1号线
第 2 行

我期望在我的函数返回的 Deferred 解决后显示 «line 3»。我试图在函数中只返回 dfd ，并且调用 test().resolve() 但它也不起作用。

提前致谢

Answer 1

首先创建一个 Deferred 对象，然后返回该 Defered 对象的 Promise，然后在某个异步方法完成后，您解决该 Promise，如下所示：

jQuery(function($){
    var $div = $('div');

    var test = (function(){
        var dfd = new $.Deferred();
        $div.animate({width:300}, 5000, 'swing', function(){
            dfd.resolve(); //line 3 will printed now, i.e. before line 1
            $div.append('<br>line 1'); //line 1 will be printed after the promise has been resolved
        });
        return dfd.promise();
    });

    $.when(test()).then(function(){
        $div.append('<br>line 3');
    });
});

FIDDLE

现在，append() 是一个同步操作，所以它不需要承诺，并且 animate 有它自己的内置回调，所以你可以通过这样做来实现：

jQuery(function($){
    var $div = $('div');

    var test = function(elem, callback){
        elem.animate({width:300}, 5000, 'swing', function(){
            callback();
        });
    };

    test($div, function() {
        $div.append('<br>line 1');
        $div.append('<br>line 2');
        $div.append('<br>line 3');
    });
});

FIDDLE