Will calling async functions within different functions still cause async behavior?

Question

Let's say I have multiple functions func1, func2, func3, etc.....

And they all contain an AJAX/async function within them:

function funcX(){ // some ajax request }

If in a main function I am calling func1, func2, func3 sequentially like so:

$(document).ready(function(){ 

      func1();
      func2();
      func3();
      ...
}

Will each ajax/async function's call be certain to execute in the order of their parent functions? At first I thought they might be, but the behavior of my program seems to be suggesting otherwise...

If not, is there a good (hopefully simple?) alternative to having a long chain of callbacks?

possible duplicate of How to synch JavaScript callbacks?

Ja͢ck
– Ja͢ck

2013-07-03 01:42:27 +00:00
Commented Jul 3, 2013 at 1:42 — Ja͢ck
– Ja͢ck, Commented Jul 3, 2013 at 1:42
Does it have to execute in order?

Ja͢ck
– Ja͢ck

2013-07-03 01:44:00 +00:00
Commented Jul 3, 2013 at 1:44 — Ja͢ck
– Ja͢ck, Commented Jul 3, 2013 at 1:44

alex · Accepted Answer · 2013-07-03 01:34:45Z

3

Will each ajax/async function's call be certain to execute in the order of their parent functions?

They should execute in order, but their internal callbacks can be called in any order.

If not, is there a good (hopefully simple?) alternative to having a long chain of callbacks?

You could use a promise, and execute the next function when the promise has been resolved.

This example uses jQuery...

var fn1 = function () {
    var d = $.Deferred();
    setTimeout(function () {
        $("body").text("Callback 1 done.") && d.resolve();
    }, Math.random() * 1300 + 800);
    return d.promise();
};

var fn2 = function () {
    var d = $.Deferred();
    setTimeout(function () {
        $("body").text("Callback 2 done.") && d.resolve();
    }, 500);
    return d.promise();
};

$.when(fn1(), fn2()).then(function () {
    setTimeout(function () {
        $("body").text("All done.");
    }, 300);
});

jsFiddle.

We use $.when() and pass the invoked functions we want to execute to it. We then use then() to show a final message (I placed a setTimeout() here so you can see the last resolved function's message in the document).

Each of these functions have their own deferred object which return the promise. A setTimeout() mocks an XHR for example's sake. When this callback is executed, we resolve the deferred object.

Once both have been deferred, we reach the callback for then().

edited Jul 3, 2013 at 1:34

answered Jul 3, 2013 at 1:19

alex

492k205 gold badges891 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

LazerSharks Over a year ago

So, for example, the ajax function in func3 could complete first before the one in func1 ?

founddrama Over a year ago

If each of the functions (func1, func2, and func3 from your example) all include some ajax call or other async operation, there is no way to know for sure which one will return or complete first. With Promises, you have more control over the order in which they start, which ensures that they happen in the "right" order. You could do this with callbacks, but the code may be harder to read at the end of the day.

CME64 Over a year ago

@Gnuey the functions will complete in any order, but you get two choices with this method, the first ( when each ajax call depends on the previous) you call the next function when the previous is complete, the second is when you want to increase performance (and there is no dependency between the ajax calls), let them run together and don't handle the calls, but use the returned promises to control what you want to do with the data after. correct me if I'm mistaken.

CME64 Over a year ago

@alex I still wonder why you didn't go with the callback functions solving this since they are already functions ! e.g. function(args .. , callbackFn ){} ..

LazerSharks Over a year ago

Thanks for your answer. I'm guessing there is no true point to the math random?

|

Community · Accepted Answer · 2017-05-23 12:21:02Z

1

To serialize tasks, I've written a helper function, which can also be found in my earlier answer:

function serializeTasks(arr, fn, done)
{
    var current = 0;

    fn(function iterate() {
        if (++current < arr.length) {
            fn(iterate, arr[current]);
        } else {
            done();
        }
    }, arr[current]);
}

It takes an array of values (in your case those are actually functions), a loop function and a completion handler. Below is the loop function:

function loopFn(nextTask, fn) 
{
    fn(nextTask);
}

It accepts an intermediate completion function as the first argument and each element of the aforementioned array.

To set everything in motion:

serializeTasks([func1, func2, func3], loopFn, function() {
    console.log('all done');
});

Your functions are called with a single argument which should be passed to the AJAX success callback, e.g.

func1(nextTask)
{
    $.ajax({
        ...,
        success: nextTask
    });
}

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Jul 3, 2013 at 1:56

Ja͢ck

174k39 gold badges269 silver badges317 bronze badges

2 Comments

LazerSharks Over a year ago

wow, that's pretty cool. Reminds me of linked lists in c++. Will give it a try but it may take me some time.

Ja͢ck Over a year ago

@Gnuey Take all the time you need :)

TGH · Accepted Answer · 2013-07-03 01:26:31Z

0

The order in which the asynch results are returned is not deterministic, and may wary every time.

func2 might complete before func1 etc

It is important to ensure correct order of execution. One pattern is to call the next function in the success callback of the prior function

Ex:

$.get("/someUrl",function(){
   $.get("/nextAjaxCall", function(){

   .....
   });
});

If the dependency chain is very simple, I don't think it's necessary to introduce a framework to handle this

edited Jul 3, 2013 at 1:26

answered Jul 3, 2013 at 1:21

TGH

39.4k13 gold badges106 silver badges140 bronze badges

Comments

saurshaz · Accepted Answer · 2014-02-14 09:20:18Z

0

Or look at async library and it's awesomeness !

async

answered Feb 14, 2014 at 9:20

saurshaz

5095 silver badges17 bronze badges

Collectives™ on Stack Overflow

Will calling async functions within different functions still cause async behavior?

4 Answers 4

10 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related