Jump to content

requesting GET with ajax in a do while loop, lags up the browser, better way?

dsaba

By dsaba
in Javascript Help

 Share

Recommended Posts

dsaba Advanced Member

dsaba

Posted
Posted

Here is my getResults.html page:

the getResults(maxMins) function is the important part...

<html>
  <head>
   <script type="text/javascript">
function GetXmlHttpObject() {
var xmlHttp=false;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}
function getResults(maxMins) {
//make ajaxObj
ajaxObj=GetXmlHttpObject();

if (ajaxObj) {
	//initiate countdown display


	//run code until time ran out
	var endTime = (new Date().getTime()) + ((1000 * 60) * maxMins);
	var numResults = 0;
	//request results via ajax
	ajaxObj.open("GET","random_numbers.php",true);
	ajaxObj.send(null);

	//loop
	do {
		if (ajaxObj.readyState==4) { 
			numResults = numResults + (ajaxObj.responseText);
			//alert(numResults);
			var resultStr = "Found " + numResults + " results.";
			document.getElementById("resultsDiv").innerHTML = resultStr;

			//request results via ajax
			ajaxObj.open("GET","random_numbers.php",true);
			ajaxObj.send(null);
		} 
	} while ((new Date().getTime()) < endTime)

	//spit out total results found
	document.getElementById("resultsDiv").innerHTML = "Time's up.<br>Found " + numResults + " total results";

} else {
	alert("Your browser does not support ajax!");
}
}
   </script>
  </head>
  <body>
   <form name="formExamp">
 Max minutes:<input type="text" name="maxMins" value="1"><br>
   <input type="button" onclick="getResults(document.formExamp.maxMins.value);" value="Start!">
  <div id="timerDiv"></div><br>
  <div id="resultsDiv"></div><br>
   </form>
  </body>
</html>

 

here's my random_numbers.php page:

<?php
header("Cache-Control: no-cache, must-revalidate");
// Date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

echo rand(0,20);
?>

 

 

 

The problem is when I press the button start and it starts requesting the php page via ajax in a do while loop, it lags the whole page up. What i'm trying to do is to loop to continue requesting the random_numbers.php page and adding up the results and outputting the results for 2 minutes. So there is no set amount of times the random_numbers.php page can be requested and iterated, teh control for the loop is the time and it should ONLY request the page again once the last ajax request has been completed. Yet.. it still lags.

 

Any way to achieve the same results without the lag? How can I fix my getResults() function ??

Thanks

 

 

*edit maybe someone should move this to ajax section.. I though it was more of a JS problem though.. with the loop and the lag.

Link to comment
Share on other sites
dsaba Advanced Member

dsaba

Posted
  • Author
Posted

here is the root of the problem:

<html>
<body>
<script type="text/javascript">
var now = new Date().getTime();
var endTime = now + ((1000*60)*2); //2 minutes after now

while (now <= endTime) {
var seconds = (endTime - now)/1000;
//document.write("seconds left: " + seconds);
//document.write("<br>");
now = new Date().getTime();
}
document.write("done");
</script>
</body>
</html>

 

 

you can run the above code with the write statements commented, or with them uncommented and it will still lag

 

is it impossible to run a while loop until a certain time has elasped without lag?

yes i'm aware of setinterval and setimout, but these are different things, the above code should still be possible as it is not an infinite loop

 

Link to comment
Share on other sites
phpQuestioner Regular Member

phpQuestioner

Posted
Posted

If you will setInterval for "X" number of seconds and then setTime to clearInterval in 2 minutes; I think this will accomplish your task. But what do you mean by lag? Sometimes it take a second, maybe two or less for the AJAX script to get the content from your php page and display it in a specific area of your page. There is usually 3 to 4 steps your AJAX script has to complete to obtain data and display said data to your page.

Link to comment
Share on other sites
dsaba Advanced Member

dsaba

Posted
  • Author
Posted
But what do you mean by lag?

 

run my last example like I sugggested, and you will find out. Your browser basically freezes up, its the same type of effect like running an infinite loop.

 

 

If you will setInterval for "X" number of seconds and then setTime to clearInterval in 2 minutes; I think this will accomplish your task.

No this is not the equivalent of my above code. Let me explain:

setinterval() runs code in time intervals  I dont think you can set any time interval small enough to compare to the interval between each iteration in my above do, while loop. So set interval will not achieve the same results. Each iteration of that above while loop should be quicker than milliseconds, you can't go smaller than millisecond intervals with setinterval.

Link to comment
Share on other sites
phpQuestioner Regular Member

phpQuestioner

Posted
Posted

I am not exactly sure what you were trying to do, but I never could get your script to work; so I just re-did it this way:

 

<html>
  <head>
   <script type="text/javascript">

function stopCount()
{
   clearTimeout(t);
var amount = document.formExamp.maxMins.value;
var numResults = 120000 / amount;
document.getElementById("timerDiv").innerHTML = "Time's up.<br>Found " + numResults + " total results";
}

function createRequestObject() {

   var req;

   if(window.XMLHttpRequest){
      // Firefox, Safari, Opera...
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      // Internet Explorer 5+
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      // There is an error creating the object,
      // just as an old browser is being used.
      document.location.href="vehicles4sale-Non-AJAX.php";
   }

   return req;

}

// Make the XMLHttpRequest object
var http = createRequestObject();

function myResults() {

   // Open PHP script for requests
   http.open('get', 'random_numbers.php');
   http.onreadystatechange = handleResponse;
   http.send(null);
}

function handleResponse() {

   if(http.readyState == 4 && http.status == 200){

      // Text returned FROM the PHP script
      var response = http.responseText;

      if(response) {
         // UPDATE ajaxTest content
         document.getElementById("resultsDiv").innerHTML="Found "+response+" Results";
      }

   }

}
function getResults()
{
myResults();
   var amount = document.formExamp.maxMins.value;
   t=setTimeout("getResults()", amount);
   setTimeout("stopCount()", 120000); // 1000 milliseconds X 60 second X 2 minutes = 120000 (2 minutes)
}
   </script>
  </head>
  <body>
   <form name="formExamp">
     Max minutes:<input type="text" name="maxMins"><br>
       <input type="button" onclick="getResults()" value="Start!">
      <div id="timerDiv"></div><br>
      <div id="resultsDiv"></div><br>
   </form>
  </body>
</html>

 

but if you keep it at 1 millisecond; I think any browser, that views this code, will keep freezing up on whoever uses this script.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.