JQuery使用deferreds序列多個ajax請求

Jaxu發表於2016-08-22

  使用JQuery對多個ajax請求序列執行。

HTML程式碼:

<a href="#">Click me!</a>
<div></div>

JS:

function GetSomeDeferredStuff() {
    var deferreds = [];

    var i = 1;
    for (i = 1; i <= 10; i++) {
        var count = i;

        deferreds.push(
        $.post('/echo/html/', {
            html: "<p>Task #" + count + " complete.",
            delay: count
        }).success(function(data) {
            $("div").append(data);
        }));
    }
    
    return deferreds;
}

$(function() {
    $("a").click(function() {
        var deferreds = GetSomeDeferredStuff();

        $.when.apply(null, deferreds).done(function() {
            $("div").append("<p>All done!</p>");
        });
    });
});

  方法類似於Node.js中的q,使用promise defer模式將所有的ajax請求放到一個陣列裡,然後通過$.when.apply().done()將所有ajax請求依次執行。

相關文章