Functions run out of order

Question

Functions run out of order

Navigation

#1 by (3 votes)

0

I'm 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 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 category 6 (guarantee of update), has to appear first that to 9 (Support and consultancy), however, is happening, sometimes happens of category 9 (Support and consultancy) to load first. >

Theupdateguaranteehastoappearfirst.

requisicao(6);requisicao(9);

Ithoughtaboutputtinga"sleep" between these functions but sleep is not working.

What to do?

Update

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);

javascript

asked by anonymous 26.09.2017 / 15:48

1 answer

Replicate DIV, change content? I can not upload file to the server

score 3 · Answer 1

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

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

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 get the support request:

function pegaSuporte(){
   requisicao(9);
}

And so, pass it on the callback:

requisicao(6, pegaSuporte);

In this way, it will look for the other category only when it fetches the first from the server.

You can read more about callbacks and asynchrony here .