Call Multiple Ajax Request In Series Or Parallel

I have 3 functions. load_graphs('national','','container-natl-rates','container-natl-counts') load_graphs('division','Western','container-west-rates','container-west-counts') load_

Solution 1:

One option would be to use callbacks like so:

function load_graphs(arg1, arg2, arg3, arg4, done) {
    // then do stuff and when that stuff is done
    // call your callback (in this case I named it "done")
    done();
}

Then in your method invocation

load_graphs('national','','container-natl-rates','container-natl-counts', function() {
    // first load_graphs() is complete
    load_graphs('division','Western','container-west-rates','container-west-counts', function() {
        // second load_graphs() is complete
        load_graphs('division','Eatern','container-east-rates','container-east-counts', function() {
            // third load_graphs() is complete
        })
    })
})

There are other more advanced options, like using third party tools like async or co

Hope this helps

Solution 2:

If you cannot change load_graphs and insert a callback call, you will have to use some other listener that indicates when load_graphs is done.

For example, you say that the function paints a graph, so there is probably some affect that you can track. Perhaps a <div> changes its width, perhaps a global variable is set to current timestamp value. Something should happen that you can catch, and it really depends on the rest of your code, which you have not provided.

After the first load_graphs call, set up a setInterval to continuously check for such indicator, and then run the next load_graphs call in turn.

Solution 3:

Look into using promises.

Using a promise is a great way to handle things like this where the next task requires a value from the previous task (or at least for the previous task to be completed first).

https://scotch.io/tutorials/javascript-promises-for-dummies