jquery when / then for recursive ajax calls

Question

function getFriends(url) {
    return FB.api(url, function(response) {
        if (response && !response.error) {
            if (response.paging && response.paging.next) {
                $.each(response.data, function() {
                    friends.push(this);
                });
                return getFriends(response.paging.next);
            } else {
                console.error(friends);
            }
        } else {
            console.error("facebook friends couldn't been retrieved ");
        }
    });
}

$.when(getFriends("/me/friends")).then(
    function() {
        console.log('getFriends finished');
    });

i want to make sure that fb calls finished when the then() block executed but had no chance. is there a way to implement this ?

thanks

Answer 1

The Facebook JS SDK does not implement jQuery style promise objects / $.Deferred s but you can easily create an instance on your own like:

function getFriends(url) {
    var dfd = $.Deferred();
    FB.api(url, function(response) {
        if (response && !response.error) {
            if (response.paging && response.paging.next) {
                $.each(response.data, function() {
                    friends.push(this);
                });
                return getFriends(response.paging.next);
            } else {
                console.log(friends);
            }
            dfd.resolve();
        } else {
            console.error("facebook friends couldn't been retrieved ");
            dfd.reject();
        }
    });
    return dfd;
}

getFriends("/me/friends").done(
    function() {
        console.log('getFriends finished');
    }
);

Answer 2

Not really an answer, but a working example that demo's how to go about it:

Demo JSFiddle

function doStuff() {

    var dfd = new jQuery.Deferred();
    alert ("loaded");
    setTimeout(function(){
        dfd.resolve("response - success");
    }, 5000);
    return dfd.promise();

}


$.when(doStuff()).then(function(status) {
    alert(status);
});