Functions perform out of order

Question

I am calling a request via function, to load 2 different items to my screen.

In this function I pass as parameter the category it belongs to, to be loaded.

function requisicao(categoria){

var xmlhttp;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    values = {"modulo":modulo,"categoria":categoria};
    myJsonString = JSON.stringify(values);
    xmlhttp.onreadystatechange = respond;
    xmlhttp.open("POST", "classes/getData.php", true);
    xmlhttp.send(myJsonString);



    function respond() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            x = document.getElementsByClassName('terceiraEtapa');
            x[0].innerHTML += xmlhttp.responseText;
        }

    }
}

It turns out that the category 6 (update guarantee), has to appear before the 9(Support and consulting), however, is happening, sometimes it happens of the category 9(Support and consulting) load first.

The update guarantee has to appear first.

requisicao(6);


requisicao(9);

I thought to put a "Sleep" between these functions but the Sleep is not working.

What to do?

Updating

function requisicao(categoria, callback){
    //seu código...
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    values = {"modulo":modulo,"categoria":categoria};
    myJsonString = JSON.stringify(values);
    xmlhttp.onreadystatechange = respond;
    xmlhttp.open("POST", "classes/getData.php", true);
    xmlhttp.send(myJsonString);
    //como o código executado na volta da requisição é a função respond, chamamos o callback aqui
    function respond() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            x = document.getElementsByClassName('terceiraEtapa');
            x[0].innerHTML += xmlhttp.responseText;
        }
        //verifica se uma função foi de fato passada, para então chama-la
        if(callback){
            callback.call();
        }
    }
}


function pegaSuporte(){
    requisicao(9);
}

requisicao(6, pegaSuporte);

Answer 1

This is because these functions are asynchronous. This means that the response of each of the requests will return when the server can respond, and this does not follow the order of the request.

To solve this, you can pass a callback to the function requisição, and call it at the end of the function respond :

function requisicao(categoria, callback){ 
    //seu código...

    //como o código executado na volta da requisição é a função respond, chamamos o callback aqui
    function respond() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            x = document.getElementsByClassName('terceiraEtapa');
            x[0].innerHTML += xmlhttp.responseText;
        }
        //verifica se uma função foi de fato passada, para então chama-la
        if(callback){
            callback.call();
        }
    }
}

And you can create a function to pick up the support request:

function pegaSuporte(){
   requisicao(9);
}

And so, spend it in the callback:

requisicao(6, pegaSuporte);

Thus, he will seek the other category only when he brings the first one from the server.

You can read more about callbacks and asynchrony here.