Why does this AJAX request take so long when it should make multiple calls?

Question

Hello all,

I make an AJAX request to a PHP script which returns a number from a text file that changes. This AJAX request should happen every 3 seconds. However, an AJAX request is made once and it doesn't return anything and firebug shows the AJAX GET request is still being made. After a few minutes it returns and produces a number. It should have made multiple calls but it only made one and it just came back with a final answer. I am struggling to figure out how this happened!? :(

//this is called first which calls getStatus which should get the progres of the
//conversion. This AJAX request takes a long time to come back which may hinder the
//getStatus coming back quickly maybe?
function convertNow(validURL){

       startTime = setTimeout('getStatus();', 6000);
       $.ajax({
       type: "GET",
       url: "main.php",
       data: 'url=' + validURL + '&filename=' + fileNameTxt,
       success: function(msg){  
       }//function    
     });//ajax

}//function convertNow

function getStatus(){

    $.ajax({
    type: "POST",
    url: "fileReader.php",
    data: 'textFile=' + fileNameTxt,
    success: function(respomse){
    textFileResponse = respomse.split(" ");
    $("#done").html("Downloading" + textFileResponse[0]);

    if(textFileResponse[0]=='100.0%'){
            $("#loading").hide("slow");
     $("#done").html("Complete");   
     return;
    }
        continueTime = setTimeout('getStatus();', 3000); 
    }
    });//ajax
}

The PHP script the second JavaScript function calls is this:

$fileName = $_POST['textFile'];
//calls an external script to get the text file output
$result = file_get_contents($_SESSION['serverURL']."fileReader.php?textFile=$fileName");
echo $result;

Is the above correct, and is my logic captured above? Or does the above mean only one AJAX request will be made?

This question is in relation to another question. A PHP script that I previously thought was slow. I am hoping the problem is JavaScript related now.

Thank you all for any help.

Answer 1

I'm not sure if you can do

setTimeout("getStatus();",3000);

but I know that you can do

setTimeout(getstatus,3000);

I'm not sure what you are running into with the slowness, but I would try putting alerts in: before the ajax, and at the success, print to a log in php (possible start and finish), and alert in the javascript when you set the continueTimeout, possibly even alert when the timeout fires... Like:

function getStatus(){
  alert('getStatus Started');
  $.ajax({
    type: "POST",
    url: "fileReader.php",
    data: 'textFile=' + fileNameTxt,
    success: function(respomse){
      alert('ajax success');
      textFileResponse = respomse.split(" ");
      $("#done").html("Downloading" + textFileResponse[0]);
      if(textFileResponse[0]=='100.0%'){
        $("#loading").hide("slow");
        $("#done").html("Complete");   
        return;
        }
      alert('starting continuetime');
      continueTime = setTimeout(**getStatus**, 3000); 
      }
    });//ajax
  }

Answer 2

You should better use setInterval instead of setTimeout

also dont forget "var" when you are using a new variable.

If the passed params are correct and the ajax request still does not return anything then the culprit is server-side.

Answer 3

I was wondering whenever this code suppose to work at all. Let say the whole idea to implement something similar to this in Javascript is doubtful. First of all, because you don't have any synchronization techniques in JavaScript at all, but in you code your are relying on particular order of execution of your code, which is not the case in 99%. By setting:

setTimeout( "getStatus", 6000);

you create a kind of concurrency, therefore you can get the second script executed first, although you delayed it, but two requests can reach the server at the same time, so probably the second script will not return you anything, so the success function will not executed anymore.
My hot advise to you consider redesign of your application, since the problem is definetely not in Javascript part at all.

BTW, I think the use of $.ajax call has to be as:

$.ajax({
type: "POST",
url: "fileReader.php",
data: { param1: value1, param2:value2...etc},
success: function(respomse){ ...}});

PS. The fact that response take a lot of time to return point to the problem on server side and not in your code in Javascript. And if we started to talk about logging and you've mentioned firebug, you can use console.log( "msg") to log into firebug console your messages.

Answer 4

Is fileReader.php calling itself in an infinite loop?

Sure sounds like it. By lookng at the little code snippet there, it sure looks like it too. (Is that the entire code?)

If fileReader.php is, then it's probably making as many calls as the web server allows per client, and then it's put on hold, which explains why you're not getting a stack overflow error. When the ajax times out (after 60 secs or whatever) the entire fileReader.php call stack just dies out, and you're left with the answer from the first ajax. Or maybe you're left with the answer from the first fileReader-call. Erh not sure.

Maybe try adding

if(!isset($_POST['textFile'])){echo "ERR: POST['textfile'] not set!"; exit(-1);}

before the part in the fileReader.php-file you showed.