0

如果我在一个函数中有一个带有多个链式承诺的 $.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() 但它也不起作用。

提前致谢

4

1 回答 1

1

首先，您创建一个 Deferred 对象，然后返回该 Deferred 对象的 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');
    });
});

小提琴

现在，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');
    });
});

小提琴

于 2013-04-13T17:48:26.210 回答