javascript - jQuery:链接动画和 AJAX 请求

Question

我有一个产品列表页面，我想通过 AJAX 加载每个产品的详细信息 View 并将其显示在页面中。我有一组更复杂的条件，我想设置动画，但我会在这里保持简单。

基本上，点击后，我想运行 AJAX 请求并同时制作动画(在某些情况下，一系列动画......)内容包装器打开并显示“加载”状态。一旦这两个都完成了，我就想加入并为内容制作动画。我认为 jQuery Deferred Objects 是可行的方法，但我对它们没有很好的理解，而且我的尝试并没有让我达到我想要的目的。

我试过这样的:

var dfr = $.Deferred();
dfr.then(function() { return wrapper.fadeIn(5000); });

$.when(dfr, $.get('/detail.html'))
.then(function() {
    console.log('All done, run additional animations...');
});

dfr.resolve();

...但是一旦 AJAX 请求完成它就会被触发，即使动画仍在运行也是如此。

我也试过这个:

var dfr = $.Deferred();
dfr.then(function() { return wrapper.fadeIn(5000); });
dfr.then(function() { return $.get('/detail.html'}) });
dfr.done(function() { console.log('All done, run additional animations...'); });
dfr.resolve();

...但这只会同时执行所有 then/done 调用。我还尝试切换 pipe 来代替 then 调用，但无济于事。

我很想了解延迟对象(这甚至是它们的适当/预期用途吗..？)，当然，我还想了解如何实现此页面的目标。非常感谢任何帮助或提示....

Answer 1

This page有一个完全按照你所说的做的例子: http://www.erichynds.com/jquery/using-deferreds-in-jquery/

更像是这样:

function animateStuff() {
   var dfd = $.Deferred();
   wrapper.fadeIn(5000, dfd.resolve); 
   return dfd.promise();
}

$.when( animateStuff(), $.get("/whatever") )
   .then(function() {
      // do something really great
})