jQuery：鏈接動畫和AJAX請求

我有一個產品列表頁面，並希望通過AJAX加載每個產品的詳細視圖並將其顯示在頁面中。我有一套更復雜的條件來設置動畫，但我會在這裏保持簡單。jQuery：鏈接動畫和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電話。我也嘗試切換pipe來代替then來電，無濟於事。

我很想理解延遲對象（這對他們來說甚至是合適的/預期的用途......），當然，我如何能夠實現我對這個頁面的目標。任何幫助或提示我們非常感激....

來源

2012-03-30 Chris Forrette

+1，我從來沒有使用延遲功能，但它看起來很有趣。看看http://stackoverflow.com/questions/4869609/how-can-jquery-deferred-be-used它看起來像接受的解決方案的第二個例子可能是你需要的。例如：$ .when（$ .getJSON（'/ some/data /'），$ .get（'template.tpl'））.then（function（data，tmpl）{//完成時調用的代碼}）; – 2012-03-30 03:15:44

這個頁面有你在談論究竟是什麼做的一個例子： 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 
})

來源

2012-03-30 03:23:29

似乎要做的 - 謝謝！ – 2012-03-30 19:33:49

它可以幫助註冊處理程序時，您的Ajax請求已經完成：

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

更多關於.ajaxStop（）here

來源

2012-03-30 03:15:22

jQuery集合是可觀察的（他們有一個promise方法）。如果您需要在各種元素鏈的動畫，使用.pipe（）

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

：

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

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

，您仍然可以使用$。當，當然：這樣你就可以做到這一點很簡單

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

來源

2012-04-20 05:48:20

jQuery：鏈接動畫和AJAX請求

回答

相關問題