Question

I have a web application where I want to get some data from an API right when the document is ready to execute javascript. I want to store this data in an Object for later access. When a user clicks on a certain link on the page, I will need access to this Object.

I’m wondering what the safest/most accepted pattern for achieving this is, since it involves to events to listen for (the success of the AJAX request and the later possible click). I don’t really want to wrap all of my code in the AJAX request if I don’t have to, but I also don’t want to run the risk of the user clicking before the AJAX request has finished (it’s a fairly small API call, but still).

Answer 1

Deferred objects to the rescue!

(function($){ // this prevents polluting the global scope
    var request = $.ajax({...});
    //... later on...
    $(someelement).on("click",function(){
        request.done(function(data){
            console.log(data);
        });
    });
})(jQuery);