check the time every 2 seconds, then do something

Forum Moderators: open

Message Too Old, No Replies

check the time every 2 seconds, then do something

webfoo

7:35 pm on Apr 24, 2011 (gmt 0)

Another part of the system I'm developing requires the following, probably accomplished with AJAX:

Every 2 seconds, Check the time.

Compare the time against the output of a particular PHP file.

If the difference is less than 3 minutes, show the user "Page A", which AJAX reloads every 2 seconds.
If the difference is greater than 3 minutes, show the user "Page B", which AJAX reloads every 30 seconds

Keep checking the time every 2 seconds

Ideally, the user should be kept on the same URL the entire time. The page may be left up in the user's browser for days on end, and it must continue to function the entire time.

What's the best way to do this?

caribguy

8:36 pm on Apr 24, 2011 (gmt 0)

Something like this?


// This is untested and may include pseudo-code...
//

previous_page = ''

refreshCheck = setTimeout(function() {
  // doTimeCheck is your function to check the time difference 
  difference = doTimeCheck(current_time);

  if (difference <= 180000) {
    page_name = 'page1.php';
    reload_time = 2000;
  }
  else {
    page_name = 'page2.php';
    reload_time = 30000;
  }

  if (page_name != previous_page) {
    clearTimeOut(ajaxLoadPage);
    ajaxLoadPage = setTimeOut(function() {
      // doAjaxLoad is your ajax function
      doAjaxLoad(page_name);  
    }, reload_time);
    previous_page = page_name;
  },2000 );

webfoo

9:19 pm on Apr 25, 2011 (gmt 0)

Caribguy, thanks so much for your help! I'm not expert on Javascript, so it's good to have people like you around!

With a few modifications, your script is running well. The only apparent issues right now are:

The script checks every 2 seconds and correctly figures out which page to show, but it doesn't call re-call doAjaxLoad() at the 2 or 30 second interval that is defined by reload_time
page1.php contains a Google Map which isn't coming through
Scriptaculous animations are not coming through in page2.php

Here's how I have it set up now:


function doAjaxLoad(whatToLoad) { // technically speaking, this is JQuery, not AJAX
 $("#responsecontainer").load(whatToLoad);
}

var previous_page = '';

var refreshCheck = setInterval(function() { // setInterval, not setTimeOut
 var difference = getDifference(); // getDifference returns the number of seconds

 if (difference <= 180) { // difference is in seconds, not milliseconds
 var page_name = "page1.php";
 var reload_time = 2000;
 }
 else {
 var page_name ="page2.php";
 var reload_time = 30000; 
 }

 if (page_name != previous_page) {
 clearInterval(ajaxLoadPage); // clearInterval, not clearTimeOut
 var ajaxLoadPage = setInterval(doAjaxLoad(page_name), reload_time); // Again, setInterval, not setTimeOut
 previous_page = page_name;
 }
 },2000 ); // check every 2000 milliseconds to see if the difference has become less than 180

caribguy

9:47 pm on Apr 25, 2011 (gmt 0)

setInterval() - duh! Sorry about that.

Going to set up a test case, I might have a use for this function :)

If all fails we'll have to get some real gurus involved. Paging fotiman...

g1smd

9:53 pm on Apr 25, 2011 (gmt 0)

What sort of bandwidth is this using?

Will there be only one user? If multiple users are accessing this page, you're going to rapidly run into capacity problems, almost a self-inflicted DOS attack.

webfoo

10:51 pm on Apr 25, 2011 (gmt 0)

There are roughly 200 users, but only about 3 are using the system at any given time. The situation in which "difference <= 180" happens only once every few hours.

I understand your concern about overwhelming the bandwidth, and I will keep this in mind.

caribguy

11:35 pm on Apr 25, 2011 (gmt 0)

I'm assuming this is for webfoo's car project?

Anyway, here is sample code that works. Maybe a bit wonky ;)



<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type = "text/javascript">
      $(document).ready(function() {
        var previous_page = '';
        var page_name = '';
        var count1 = 0;
        var count2 = 0;
        var reload_time = 0;      
        var ajaxLoadPage = 0;
        var difference = 0;
        function doAjaxLoad(pageToLoad) {
           count2 ++
         $("#responsecontainer").html(pageToLoad + ' ' + count2 + ' ' + reload_time );
        }
        refreshCheck = setInterval(function() {
          count1 ++ ;
          $("#refresh_check").html(count1);
          difference = $('#input_difference').attr('value');
          if (difference <= 180) {
            page_name = "page1.php";
            reload_time = 2000;
          }
          else {
            page_name = "page2.php";
            reload_time = 30000;
          }
          $("#page_name").html(page_name);
          $("#difference").html(difference);
          if (page_name != previous_page) {
            $("#fetch_page").html('Getting: ' + page_name);
            clearInterval(ajaxLoadPage);
            count2 = 0
            doAjaxLoad(page_name);
            ajaxLoadPage = setInterval( function() {
              doAjaxLoad(page_name);
              }, reload_time);
            previous_page = page_name;
          }
          else {
            $("#fetch_page").html('zzzz.... sleeping ' + reload_time / 1000 + ' seconds!');
          }
        },2000 ); // check every 2000 milliseconds to see if the difference has become less than 180
      });
    </script>
  </head>
  <body>
    <input type="text" id="input_difference" value="0"></input>
    
    <div id="responsecontainer">I will be populated soon...</div>
    
    <div>Checked <span id="refresh_check">0</span> times.</div>
    <div>Difference: <span id="difference"></span></div>    
    <div>Page name: <span id="page_name"></span></div>
    <div id="fetch_page"></div>    
  </body>
</html>