我有一个产品列表页面,想要通过AJAX加载每个产品的详细视图并在页面中显示它.我有一套更复杂的条件我想设置动画,但我会在这里保持简单.

基本上,点击后,我想运行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调用.我也尝试用管道代替当时的电话,无济于事.

我很想了解延迟对象(这甚至是适合他们的用途……？),当然,我如何才能实现此页面的目标.任何帮助或提示非常感谢….

解决方法:

这个页面有一个例子,说明你正在谈论的内容：
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
})