ajax - この関数を非同期に書き換えるにはどうすればよいですか?

Question

API から画像を取得してアニメーション スクローラーに挿入する関数があります。次のようになります (わかりやすくするために簡略化しています)。

function getPhotos(id) {
    $.when(Service.getPhotos(id))
        .then(function(results) {
            var photos = results.photos,
                scroller = $("#scroller");

            // Add the photos to the scroller
            for (var i = 0; i < photos.length; i++) {
                var photo = photos[i].url;

                // Only add a photo if its URL is valid
                if (photoExists(photo) == 200) {
                    scroller.append("<li><img src='" + photo + "' /></li>");    
                } else {
                    console.log("Photo " + photo + " doesn't exist");
                }
            }
        })
        .fail(function(err) {
            console.log(err);
        });
}

ただし、写真の URL は常に有効な画像に解決されるとは限らないため、次のphotoExists()関数を使用してそれらを実行します。

function photoExists(photo) {
    var http = jQuery.ajax({
        type: "HEAD",
        url: photo,
        async: false
    });

    return http.status;
}

特定の写真の URL がステータス コード を返した場合200、画像が存在することがわかり、それをスクローラーに挿入します。それ以外の場合は、壊れた画像を挿入しないようにスキップします。

ここでの問題は、async: falseこれが非同期ではないため、すべてが完了するまで UI 全体がロックアップすることです。ループする必要がある写真の URL の数によっては、非常に長い時間がかかる可能性があります。

async: trueただし、を使用すると、photoExists()関数は AJAX リクエスト自体が実際に完了する前にステータス コードを返そうとしphotoExists(photo)ます200。

これを非同期に実行できるように調整photoExists()して、UI のロックを回避しながら、正しいステータス コードを返して、スクローラーに写真を適切に挿入できるようにするにはどうすればよいでしょうか。