Force Javascript function call to wait until previous one is finished

Question

I have a simple Javascript function:

makeRequest();

It does a bunch of stuff and places a bunch of content into the DOM.

I make a few calls like so:

makeRequest('food');
makeRequest('shopping');

However, they both fire so quickly that they are stepping on each other's toes. Ultimately I need it to have the functionality of.

makeRequest('food');
wait....
makeRequest('shopping'); only if makeRequest('food') has finished

Thoughts on getting these to execute only one at a time?

Thanks!

Answer 1

If these functions actually do an AJAX request, you are better keeping them asynchronous. You can make a synchronous AJAX request but it will stop the browser from responding and lead to bad user experience.

If what you require if that these AJAX requests are made one after the other because they depend on each other, you should investigate your function to see if it provides a callback mechanism.

makeRequest('food', function()
{
    // called when food request is done
    makeRequest('shopping');
});

Using jQuery, it looks something like that

$.get("/food", function(food)
{
    // do something with food

    $.get("/shopping", function(shopping)
    {
        // do something with shopping
    });
});

Answer 2

I would recommend that you simply write them asynchronously--for example, call makeRequest('shopping'); from the AJAX completion handler of the first call.

If you do not want to write your code asynchronously, see Javascript Strands