0

对于 Ajax 调用，我有一些不同元素的转换，必须按特定顺序调用。在阅读有关 jQuery Deferred 的信息时，我认为这就是我想要的，但我似乎无法让它工作。

我做了一个简单的 jsfiddle 来说明我想要归档的内容：http: //jsfiddle.net/pe5Bb/1/

我猜的问题是css3转换。所有功能都从头开始执行。但是，当我在 transitionend 回调中放置一个 console.log 时，它似乎可以工作，但该函数之前仍然执行。

function box2() {
var deferred = $.Deferred();

if ( $('#box2').hasClass('active') ) {
    $('#box2').css({opacity:0}).bind(transitionend, function(){
        console.log("css3 done");
        deferred.resolve();
        $('#box2').unbind(transitionend);
    });
 } else {
     deferred.resolve();
 }

return deferred.promise();

}

我想要实现的是我可以创建多个函数（具有转换到新内容的状态）并且我可以知道它们应该以什么顺序被调用。在此示例中，我使用有时通过添加/删除类来调用的 css3 转换。如果在这种情况下使用 deferred 不正确，我想听听。

4

1 回答 1

1

我认为问题只是你所说的完成的方式。当 promise 被解决时，你应该传递你想要执行的函数。像这样的东西：

var promise = box();
promise.done( box2 );

如果你想链接一堆调用，你可以这样做：

var promise = box();
promise.done(function() {
    promise = box2();
    promise.done(function() {
        scrollTo();
    });
});

jsfiddle链接

或者，您可以使用该then方法，但您需要像这样调用它：

var promise = box();
promise.done().then( box2 ).done().then( scrollTo );
于 2013-07-06T19:42:44.877 回答