Request Many Ajax By Deferred Tip

jQuery Deferred 可以讓 user 達到同時使用許多 Ajax request 時，等待所有 request 完成後再執行功能的目的，大部分的範例都是這樣：

$.when($.ajax('xxx.php'), $.ajax('xxx.php'))
 .done(function() {
  cosnole.log('all done');
 });

程式會等到兩個 Ajax 都執行完畢後才觸發 console log，假設今天我們遇到的情況符合以下條件：

1. 超過兩個以上的 ajax request
2. 有一定的邏輯

我們不會希望有十個 request 就在裡面塞十次 code，可以利用一種寫法來達到這個目的

deferred.js

$(function() {
    load()
        .done(function() {
            console.log('all done');
        })

    function load() {
        var results = [];

        for (i = 1; i <= 3; i++) {
            result = $.get('ajax.php').done(function(i) {
                console.log(i + ' is done');
            });

            results.push(result);
        }

        return $.when.apply($, results);
    }
})

ajax.php

<?

sleep(2);
echo rand(1, 999);

js 的範例是指呼叫了 ajax.php 三次，當 array 完成時，回傳 $.when.apply 的結果，使用這個 function 會將所有完成的行為視為 deferred 物件傳回，所以 done 就會有所反應，當然也可以寫成這樣：

$(function() {
    var results = [];

    for (i = 1; i < 3; i++) {
        result = $.get('ajax.php').done(function(i) {
            console.log(i + ' is done');
        });

        results.push(result);
    }

    $.when.apply($, results).done(function() {
        console.log('all done');
    });
})

寫成 function 彈性比較大一點，得到的結果如下

923 is done
144 is done
all done