Question

I know that ajax calls are asynchronous but there are situations like some synchronous execution is needed. For Example,

loadMyProfile();
editMyProfile();

These are two javascript functions I want loadMyprofile() should be executed completely and after that it should call editMyProfile(). But that is not happening because its asynchronous.I have heard like callbacks will be the best to handle this situation. So could anyone please explain about callbacks and a sample associated with this example?

Any help will be appreciated!

Thanks,
Karthik

Answer 1

I know that javascript is asynchronous

JavaScript isn’t asynchronous. The language itself defines no asynchronous features at all. The two function calls you’ve shown will be done in order, first loadMyProfile, then editMyProfile. JavaScript does have language features that make asynchronous programming a lot easier, but it doesn’t itself define any asynchronous operations.

There are two major asynchronous features of the environment in which JavaScript runs in the web browser, though, which (forgive me) I assume is the environment in which you’re trying to use it.

The first and probably most relevant is that, by default, ajax calls are asynchronous. So for instance, if your loadMyProfile function is making an ajax call, the function will return before that ajax call is completed. This is a feature (and quite a useful one!) of the XMLHttpRequest object.

The second is the setTimeout and setInterval functions available on the window object in a web browser. setTimeout schedules a function to be called after a timeout (e.g., asynchronously). setInterval schedules a function to be called repeatedly, at an interval.

A callback is simply a function that gets called when something else happens. The XMLHttpRequest object accepts functions it will call on completion, etc. The functions that you use with setTimeout and setInterval are callbacks. Event handlers are another kind of callback, called when the relevant event occurs in the DOM.

Looking at your example:

loadMyProfile();
editMyProfile();

Let’s assume that loadMyProfile does indeed do an asynchronous ajax call to load the profile information from a server and then display it on the page, e.g.:

function loadMyProfile() {
    issueAjaxRequest("/some/url", "some data", function() {
        // This function is the completion callback for the ajax call.
        // It gets called *after* `loadMyProfile` has already returned.
        showProfileOnPage();
    });
}

(That code is syntactically correct, it just uses made-up functions to avoid blinding you with details.)

Now, if we want to be able to call editMyProfile when the profile has finished loading, we need to make loadMyProfile accept a callback function that it will call when the profile has been loaded:

function loadMyProfile(callback) {
    issueAjaxRequest("/some/url", "some data", function() {
        // This function is the completion callback for the ajax call.
        // It gets called *after* `loadMyProfile` has already returned.
        showProfileOnPage();

        // Call the callback if any
        if (typeof callback === "function") {
            callback();
        }
    });
}

Then we use it like this:

loadMyProfile(editMyProfile);

Note there that I don’t have () after editMyProfile. I’m not calling it directly in that statement, I’m passing a reference to it into loadMyProfile, which will call it when the appropriate time comes.