Question

I have a problem with the following javascript code.
Basically I want to run a background check (check.php) for a process on an Unix server. The execution time of the php and response takes about 1.2-1.5 seconds (did a test in Mozilla) so I’ve come up with the script below to refresh and check what’s going on with that process and change the background of a DIV accordingly.
Right now, after a few refreshes it just hangs, because I think it goes into a loop and it doesn’t wait for the first function to finish and it just piles up.
Any ideas what am I doing wrong? A more simpler way to do it?

<script language="javascript" type="text/javascript">

    function getVal(param)
    {
        var strURL = param;
        var req = new XMLHttpRequest();
        req.open("GET", strURL, false); //third parameter is set to false here
        req.send(null);
        return req.responseText;
    }

    function changeDivImage()
    {   
        var pid = getVal("check.php")
        var imgPath = new String();
        imgPath = document.getElementById("status_body").style.backgroundImage;

            if(pid == 2)
            {
                document.getElementById("status_body").style.backgroundImage = "url(active.png)";
            }
            else
            {
                document.getElementById("status_body").style.backgroundImage = "url(down.png)";
            }
        changetimer();
    }

    function changetimer()
    {
        setInterval( "changeDivImage()", 5000 );
    }
    </script>

Answer 1

setInterval will keep calling the funciton over and over, so calling the changetimer funciton again after the changeDivImage returns will stack up more and more unwanted functions. try this:

<script language="javascript" type="text/javascript">

    function getVal(param)
    {
        var strURL = param;
        var req = new XMLHttpRequest();
        req.open("GET", strURL, false); //third parameter is set to false here
        req.send(null);
        return req.responseText;
    }
    //this function calls it self automatically and again everytime 
    //but only when it finishes its operations.

(function changeDivImage()
{   
    var pid = getVal("check.php")
    var imgPath = new String();
    imgPath = document.getElementById("status_body").style.backgroundImage;

        if(pid == 2)
        {
            document.getElementById("status_body").style.backgroundImage = "url(active.png)";
        }
        else
        {
            document.getElementById("status_body").style.backgroundImage = "url(down.png)";
        }
      setTimeout(changeDivImage, 5000);
})();