Question

我有一个产品详情页面，想要通过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();

...但是一旦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

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

Answer 2

jQuery集合是可观察的（它们有promise方法）。所以你可以非常简单地做到这一点：

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

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

function chainAnim() {
    return wrapper.fadeIn( 5000 ).promise().pipe(function() {
        return internal.fadeIn( 1000 );
    });
}

chainAnim().done(function() {
    // wrapper than internal faded in
});

当然，你仍然可以使用$ .when：

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

Answer 3

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

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

更多关于.ajaxStop（）here

jQuery：链接动画和AJAX请求

3 个答案: