Javascript jQuery：链接动画和AJAX请求

我有一个产品列表页面，希望通过AJAX加载每个产品的详细视图，并在页面中显示它。我有一组更复杂的条件，我想用它们来设置动画，但在这里我会保持简单

基本上，单击后，我希望运行AJAX请求，同时为内容包装器打开并显示“加载”状态设置动画（在某些情况下，是一系列动画…）。一旦这两个都完成了，我就想去看看，并为内容设置动画。我原以为jQuery延迟对象会是一个不错的选择，但我没有很好地掌握它们，我的尝试也没有让我达到我想要的目的

我试过这样的方法：

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();

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

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

。。。但一旦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();

。。。但这只是同时执行所有

调用，然后

/

完成

调用。我还试着用

管道

来代替

然后

调用，但没有成功

---

我很想了解延迟对象（这是否是它们的适当/预期用途？），当然，还有我如何实现本页面的目标。非常感谢您提供的任何帮助或提示……

在ajax请求完成后注册处理程序可能会有所帮助：

$('.content').ajaxStop(function() { 
   animateContent();
});

---

有关.ajaxStop（）的详细信息

本页提供了一个示例，说明您所说的内容：

更像这样：

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();

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

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

---

jQuery集合是可观察的（它们有一个方法）。因此，您可以非常简单地执行此操作：

$.when( wrapper.fadeIn( 5000 ), $.get( "/whatever" ) ).done(function() {
    // animation and ajax request complete
});

如果需要在各种元素上链接动画，请使用.pipe（）：

当然，在以下情况下，您仍然可以使用$：

$.when( chainAnim(), $.get( "/whatever" ) ).done(function() {
    // animation and ajax request complete
});

---

+我从未使用过延迟功能，但它看起来很有趣。请看，第二个被接受的解决方案示例可能就是您所需要的。类似于：$.when（$.getJSON（'/some/data/'），$.get（'template.tpl'））。然后（function（data，tmpl）{//在完成这两个函数时调用的代码}）；