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已经解决之后显示“第3行”。我试图在函数中只返回dfd，并且调用test（）。resolve（）但它也不起作用。

提前致谢

Answer 1

首先创建一个Deferred对象，然后返回Deffered对象的promise，稍后再说一些async方法完成之后你就解决了这个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

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

1 个答案: