CODEWITHSUNDEEP
javascriptajaxsettimeout
Bogdan
Bogdan

Reputation: 1911

This javascript setTimeout interacts with ajax requests in a really weird way

I'm writing this script so that it displays the status of an import script. It's supposed to call a function, that runs a http request, every X seconds.

function progres_import() {
//if(import_status != 'finalizat') {
    alert("progres_import");
    setTimeout(function() { return update_progres_import(); }, 2000);
    setTimeout(function() { return update_progres_import(); }, 4000);
    setTimeout(function() { return update_progres_import(); }, 6000);
    setTimeout(function() { return update_progres_import(); }, 8000);

    //setTimeout(function() { progres_import(); }, 400);
//}
//else {

//}
}

this is what i used to test the functionality. I put the comments in too just to show what I intend to ultimately do with it. I tried all the possible setTimeout calls, with quotes, without quotes, with and without the anonymous function.

var xmlhttp_import_progres;
function update_progres_import() {
xmlhttp_import_progres=GetXMLHttpObject();
if (xmlhttp_import_progres==null) {
    alert ("Browser does not support HTTP Request (xmlhttp_import_progres)");
    return;
}

var url="crm/ferestre/import_progres.php";  
url=url+"?sid="+Math.random();

xmlhttp_import_progres.onreadystatechange=function() {
    if (xmlhttp_import_progres.readyState == 4) {
        progres_resp = xmlhttp_import_progres.responseText;
        progres = progres_resp.split('_');
        import_nrc = progres[0];
        import_nrt = progres[1];
        import_status = progres[2];
        mesaj = 'Progres import: ' + import_nrc + ' / ' + import_nrt;
        //document.getElementById("corp_import_mesaj").innerHTML = mesaj;
        alert(progres_resp);        
    }
};
xmlhttp_import_progres.open("POST",url,true);
xmlhttp_import_progres.send(null);
}

this is the business end of the progres_import function.

what happens is i get the alert("progress_import") in the first function right as the import process starts, but the alert(progres_resp) in the second one starts popping up only after the import process is over (it still maintains the 2 second interval so in that sense the setTimeouts worked).

the php script in the ajax request just takes some session variables that the import script sets and prints them for the javascript to use (x imports of y total, z failed, stuff like this)

Any idea why it behaves like this?

Upvotes: 0

Views: 458

Answers (2)

vietean
vietean

Reputation: 3033

Here, can you try to edit just a little:
Please consider the above answer, but this code will make clear for you:

function progres_import() {
//if(import_status != 'finalizat') {
    alert("progres_import");
    setTimeout(function() { return update_progres_import(0); }, 2000);
    setTimeout(function() { return update_progres_import(1); }, 4000);
    setTimeout(function() { return update_progres_import(2); }, 6000);
    setTimeout(function() { return update_progres_import(3); }, 8000);

    //setTimeout(function() { progres_import(); }, 400);
//}
//else {

//}
}

AND

var xmlhttp_import_progres = [];
function update_progres_import(i) {
    xmlhttp_import_progres[i]= GetXMLHttpObject();
    if (xmlhttp_import_progres[i]==null) {
        alert ("Browser does not support HTTP Request (xmlhttp_import_progres)");
        return;
    }

    var url="crm/ferestre/import_progres.php";  
    url=url+"?sid="+Math.random();

    xmlhttp_import_progres[i].onreadystatechange=function() {
        if (xmlhttp_import_progres[i].readyState == 4) {
            progres_resp = xmlhttp_import_progres[i].responseText;
            progres = progres_resp.split('_');
            import_nrc = progres[0];
            import_nrt = progres[1];
            import_status = progres[2];
            mesaj = 'Progres import: ' + import_nrc + ' / ' + import_nrt;
            //document.getElementById("corp_import_mesaj").innerHTML = mesaj;
            alert(progres_resp);        
        }
    };
    xmlhttp_import_progres[i].open("POST",url,true);
    xmlhttp_import_progres[i].send(null);
}

Upvotes: 1

Rob W
Rob W

Reputation: 349042

xmlhttp_import_progres.readyState == 4) is only true at the end of the request. Hence, your alert dialogs pop up after finishing the request.

Furthermore, you can't expect your function to show alerts after a 2 second interval, because the server may or may not respond as fast.

A final note: If you want to have a periodical update function, use setInterval(function(){...}, 2000).

EDIT

Also, add var in this way: var xmlhttp_import_progres = GetXMLHttpObject();. Currently, you're globally defining the HTTP object, causing only one instance of the HTTP object to be accessible.

Upvotes: 3

Related Questions