Asynchronize ajax calls and javascript code

Question

I have a certain script that consists of ajax calls, and functions the use the data from the ajax calls to calculate something. There are basically two parts: a smaller part one, that has lot's of code and a few ajax calls; and a bigger part two, that has less code, but lots of ajax calls. Here is the 'simplified' version of my script:

function doStuff(i, moreWork){
    var max = 20000*Math.random() + (200000+100000*Math.random())*moreWork;
    for(var j = 0; j < max; j++){
        $("#hello").text();
    }
}

function ajaxCall(i, url){
    if(i === 40){
        return false;
    } 

    $.get(url, function(data){            
        url = $(data).find("#url").attr("href");
        if(i < 10){
            //The first few calls cause a lot of work
            doStuff(i, 1);        
        }
        else{
            //The others are much faster done
            doStuff(i, 0);
        }     
        ajaxCall(++i, url);
    });
}

var url = "www.example.com"
ajaxCall(0, url);

If I change the ajax calls in timeouts, I can relatively see how long this takes to complete:

http://jsfiddle.net/XiozZe/KfW93/

Now, I think this script could be twice as fast, because the CPU is doing nothing, when he is waiting for the ajax calls. And while the CPU is doing work, there are ajax calls that can be called.

So I already did a slight improvement, I swapped the ajax call with the doStuff:

function doStuff(i, moreWork){
    var max = 20000*Math.random() + (200000+100000*Math.random())*moreWork;
    for(var j = 0; j < max; j++){
        $("#hello").text();
    }
}

function ajaxCall(i, url){
    if(i === 40){
        return false;
    } 

    $.get(url, function(data){            
        url = $(data).find("#url").attr("href");
        ajaxCall(++i, url);
        if(i < 10){
            //The first few calls cause a lot of work
            doStuff(i, 1);        
        }
        else{
            //The others are much faster done
            doStuff(i, 0);
        }     
    });
}

var url = "www.example.com"
ajaxCall(0, url);

http://jsfiddle.net/XiozZe/KfW93/3/

This way, the script sends the second ajax call immediately after the first one was finished, and then begins with the code. The third ajax call is send after the first code and the second ajax call has finished.

Is there a way to make the two parts (ajax calls / work on code) sort of asynchronous? I want to keep sending and receiving ajax calls that don't have to wait for the code to finish. In the second the computer has to wait for the ajax call to come back, he uses that time to work on some code, and when the the call arrives, he interrupts the code for a moment to send the next one. My goal is that on every given moment, there is an ajax call on the way and my CPU is busy, or one of them is completely finished.

More explanation:

In the first example, the work scheme is this:

Send ajax call 1
- Ajax: busy
- CPU: doing nothing
Receive ajax call 1 && Start doStuff 1
- Ajax: doing nothing
- CPU: busy
Finish doStuff 1 && Send ajax call 2
- Ajax: busy
- CPU: doing nothing
Receive ajax call 2 && Start doStuff 2
- Ajax: doing nothing
- CPU: busy
...

In the second example, the work scheme is this:

Send ajax call 1
- Ajax: busy
- CPU: doing nothing
Receive ajax call 1 && Send ajax call 2 && Start doStuff 1
- Ajax: busy
- CPU: busy
Finish ajax call 2
- Ajax: doing nothing
- CPU: busy
Finish doStuff && Send ajax call 3 && Start doStuff 2
- Ajax: busy
- CPU: busy
Finish ajax call 3
- Ajax: doing nothing
- CPU: busy
Finish doStuff 2 && Send ajax call 4 && Start doStuff 3
- Ajax: busy
- CPU: busy
...

I want this:

Send ajax call 1
- Ajax: busy
- CPU: doing nothing
Receive ajax call 1 && Send ajax call 2 && Start doStuff 1
- Ajax: busy
- CPU: busy
Finish ajax call 2 && Send ajax call 3
- Ajax: busy
- CPU: busy
Finish doStuff 1 && Start doStuff 2
- Ajax: busy
- CPU: busy
Finish ajax call 3 && Send ajax call 4
- Ajax: busy
- CPU: busy
Finish doStuff 2 && Start doStuff 3
- Ajax: busy
- CPU: busy
...

score 0 · Answer 1 · answered Mar 16 '14 at 13:31

0

XiozZe this is not calling the next ajax call once the first has finished! It calls the next ajax call after the wait has finished. To call the next ajax call after the first on has finished you should do it in the callback function of your ajax call. Ajax calls are asynchronous by definition so you can call as many of them as you want in sequence and they won't have to wait for each other.

Here is a jquery example (just to make it more readable):

$.get("your/url");
$.get("another/url");

These two ajax calls above will execute one after the other and they won't wait for each other. If you want the second one to wait for the first one you can do something like this:

$.get("your/url", function(){
      $.get("another/url");
});

answered Mar 16 '14 at 13:31

valanto

893
3
8
23

I can't fire all the ajax calls at once, see my edit. Thanks already! – XiozZe Mar 16 '14 at 13:39
Well the way it is now the second will fire after the first has finished and the third after the second and so forth. If you want to parallelize calls you need to call ajaxCall(++i, url); outside the callback function of the ajax request. If you don't all to be fired at the same time you can set some timeout so that it waits a bit before the next one fires. Depends on what you want to achive – valanto Mar 17 '14 at 09:09
The problem is, the third will not immediately fire after the second. Instead, it will queue up, and will be fired after the first code has finished. This will leave an inefficient gap, which could be filled an ajax call. – XiozZe Mar 17 '14 at 16:37
just to understand. you want the second and third together after the first has finished. what about the other 37 calls? – valanto Mar 17 '14 at 20:22
Maybe the new schemes will clarify the thing I want to achieve. – XiozZe Mar 18 '14 at 16:19
XiozZe. With the two principles I gave above you should be able to construct the logic for any of the "schemes" you want... – valanto Mar 19 '14 at 07:13

Asynchronize ajax calls and javascript code

1 Answers1

Linked