CODEWITHSUNDEEP
javascriptfunction
daynasti12
daynasti12

Reputation: 11

order of execution of the functions do not work properly

I have the following problem: The order of execution of the functions do not work properly. I want to retrieve the return value of a function ( a table) in another function. It seems very simple but it gets complicated for me because the instruction execution order is not done properly then I can’t get the return value of the first function.

var tabImage = new Array;

function remplissageDynamiqueImagesParId(idImag) {
    alert("1");

    var ajax = new XMLHttpRequest();

    ajax.open("GET", "http://localhost/jsonrecuperImagesParId.php?id=" + idImag, true);

    alert("2");

    ajax.send();

    alert("3");

    ajax.onreadystatechange = function () {
        alert("4");

        if (ajax.readyState == 4 && (ajax.status == 200 || ajax.status == 0)) {
            eval('var data = ' + ajax.responseText + ';');`enter code here`

            var theResults = data.results;

            alert("5");

            for (var i = 0; i < theResults.length; i++) {
                tabImage[i] = new imageFromBase(theResults[i].idImage, theResults[i].url);


            }

            alert("taille tableau:" + tabImage.length);

            return tabImage;
        }
    }
} //fin methode

function test() {
    alert("dans test");

    var tab = new Array();

    tab = remplissageDynamiqueImagesParId(10);

    alert("fin test");

    alert("taille tableau dans test: " + tab.length);
}

After run I get this:

Why this order?
How can I get the table?

Upvotes: 0

Views: 164

Answers (3)

daynasti12
daynasti12

Reputation: 11

I found the solution, just change the last parameter of the function open to false (to make it a synchronous function) and remove alerts that may make heavy the execution

Upvotes: 1

daynasti12
daynasti12

Reputation: 11

i try this:

var tabImage=new Array;
function remplissageDynamiqueImagesParId(idImag,tabImage)
{

    var ajax = new XMLHttpRequest();   
    ajax.onreadystatechange=function(){
    alert("4");
     if(ajax.readyState==4 && (ajax.status==200||ajax.status==0)){
     eval('var data = ' + ajax.responseText + ';');  
     var theResults = data.results;
    alert("5");
     for(var i=0;i<theResults.length;i++)
     {
         tabImage[i]=new imageFromBase(theResults[i].idImage,theResults[i].url);


     }
     alert("taille tableau "+tabImage.length);
     return tabImage;

 }

}
    ajax.open("GET","http://localhost/jsonrecuperImagesParId.php?id="+idImag,true);
    ajax.send();
    alert("fin remplissageDynamiqueImagesParId");
}//fin methode
function test() 
{
    alert("dans test");
remplissageDynamiqueImagesParId(10,tabImage);
alert("fin test");
alert("taille tableau dans test: "+tabImage.length);    
}

but unfortunately I can't get my table from the first execution, it works properly from the second. but unfortunately that dosen't solve my probelm. Does anyone know how can i block execution until ajax.onreadystatechange completes its execution.Thank you for your help.

Upvotes: 0

Aki Suihkonen
Aki Suihkonen

Reputation: 20027

The reason is that the 'A' in 'Ajax' stands for asynchronous. The function executing an asynchronous command doesn't wait for the command to finish. Instead one places a callback routine to trigger, when the action is done (in this case a it's placed to the 'onreadystatechanged' handler, which is called when ever there is a change in some "ready state".

Especially a statement of form a=function(params) { ... } doesn't call the function, but it declares or defines the function.

I can't test the function, as I don't have the same content on my localhost, but I can suggest some necessary changes.

  • Switch the order of ajax.onreadystatechange = function () { ... } and ajax.send(); Without this the send command can also finish before it has any chance of executing the onreadystatechange function.

  • declare function remplissageDynamiqueImagesParId(idImag, result) { ... } with the ajax.onreadystatechange = function () { ... result.xxx = tabImage; }

  • call with var result={}; tab = remplissageDynamiqueImagesParId(10, result);

Again, as this is asynchronous, the result is not immediately changed after the first called function returns.

Upvotes: 1

Related Questions