CODEWITHSUNDEEP
javascriptajax
toastext
toastext

Reputation: 335

why ajax value return is undefined with settimeout? how do I fix it?

I got two AJAX functions that I need to call when the HTML body onload. The function need to operated at separated time interval for different type of chat so I can soften the work load on the server. (please no JQuery)

function funcNamePOST(data1, data2) {
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function(){
        //Appending xml data to html in a for loop
    }
    var date = new Date();
    var datetime = date.getTime();
    xmlhttp.open("POST", "page1.php", true);

    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    var parameters = "data1="+data1+"&data2="+data2;
    xmlhttp.send(parameters);
}

function funcNameGET(data1, data2) {
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function(){
        //Appending xml data to html in a for loop
    }
    var date = new Date();
    var datetime = date.getTime();

    xmlhttp.open("GET", "page2.php?datetime="+datetime, true);

    xmlhttp.send();
}

Both of these AJAX works fine on there own, but this get strange then I try to nest them and/or add them to a time functions. Example:

function nest(data1, data2) {
    funcNamePOST(data1, data2); 
    funcNameGET(data1, data2);
}

OR

function nest(data1, data2) {
        setTimeout( function(){
            funcNamePOST(data1, data2); 
        }, 10000);
        //I need this to run every 10 sec
        setTimeout( function(){
            funcNameGET(data1, data2);
        }, 60000);
        //I need this to run every 60 sec
    }

Only the second AJAX in the nest execute. It Doesn't matter which order the function is in the nest, and then it output an error on the first function.

TypeError: AJAX "XML value" return is undefined.

I know that not true because they work fine on their own.

The only way I got it to work was to put them inside timed functions, but I can't get get the first function to run every 10 sec this way.

function nest(data1, data2) {
        setTimeout( function(){
            funcNamePOST(data1, data2); 
            setTimeout( function(){
                funcNameGET(data1, data2);
            }, 60000);
        }, 10000);
    }

Upvotes: 1

Views: 89

Answers (1)

Pointy
Pointy

Reputation: 413682

Your functions are sharing a single global variable called xmlhttp. Declare that variable separately in each function with var:

var xmlhttp;

What's happening now is that each function is "stepping on" the other one when it's called by overwriting the value of xmlhttp. By making two local variables instead, that can't happen.

One good way to catch problems like this (at least in newer browsers) is to get in the habit of adding

"use strict";

as the very first line of code in each function, or if possible as the first line of code in the whole script block. If you do that, you put the interpreter in "strict" mode, and in that mode it would have flagged the assignments to xmlhttp as erroneous.

Upvotes: 2

Related Questions