title: Running a real-time clock with AJAX
body: <p>Now that I was helped getting AJAX running just great, I'm having problems running a clock function with it....</p>
  
  <p>Clock code (located in the head):</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var ampm = "AM"; //Default
  var message="";
  
  
  function startTime()
  {
  var today = new Date(); //Number goes here
  var h=today.getHours();
  var m=today.getMinutes();
  var s=today.getSeconds();
  // add a zero in front of numbers&lt;10
  m=checkTime(m);
  s=checkTime(s);
  h=checkTime2(h);
  document.getElementById('clocktxt').innerHTML=h+":"+m+":"+s+ " " +ampm + " " + message;
  //t=setTimeout('startTime()',500);
  }
  
  function checkTime(i)
  {
  if (i&lt;10)
    {
    i="0" + i;
  message = "How long you gonna sit there?";
    }
  return i;
  }
  
  function checkTime2(i)
  {
  if (i&gt;12)
    {
    i=i-12;
  ampm="PM";
    }
  return i;
  }
  
  
  //setInterval(startTime,1000);
  
  &lt;/script&gt;
  </code></pre>
  
  <p>AJAX code (bottom of the document):</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  function CheckForChange(){
      //alert("&lt;?echo (count($listArray)) . ' and ' . count(file($filename_noformat))?&gt;");
      //if (&lt;?echo count($listArray)?&gt; == &lt;?echo count(explode("\n", $filename_noformat))?&gt;){
          //setInterval("alert('Yup, it is 1')", 5000);
  
          //alert('Now it is changed');
      //}
  
      var ajaxReady = new XMLHttpRequest();
      ajaxReady.onreadystatechange = function(){
          if (ajaxReady.readyState == 4){
              //Get the data
              //document.getElementById('clocktxt').innerHTML = ajaxReady.responseText;
              //startTime();
              //alert("here");
              //alert(ajaxReady.responseText);
          }
      }
      ajaxReady.open("GET","ServerTime.php",true);
      ajaxReady.send(null);
  }
  
  setInterval(CheckForChange(), 1000);
  setInterval(startTime(),1000);
  &lt;/script&gt;
  </code></pre>
  
  <p>What I'm trying to do is pass the input from ServerTime.php which is just a count of milliseconds from Unix epoch, into the clock, so the clock is being updated by the AJAX every second and the clock function runs with a new starting value each second.... I used to have parameters for the clock function before I realized the clock wasn't even getting called.</p>
  
  <p>What do you think is wrong? I'm guessing it has something to do with the clock and the caller of the clock being in two different script tags, but I can't think of how to get around it. For some reason when I moved the AJAX part into the same script tag, following the clock, nothing happens.</p>
  
  <p>To Kolink: I have this</p>
  
  <pre><code>function getTheNow(){
  TIMESTAMP = &lt;?php echo time(); ?&gt;000;
      offset = new Date().getTime()-TIMESTAMP;
      setInterval(function() {
          var now = new Date();
          now.setTime(now.getTime()-offset);
          // print out the time according to the variable `now`
  //alert(now);
      },5000);
  return now;
  }
  
  
  function startTime()
  {
  var now = getTheNow;
  //alert(now);
  var today = new Date(); //Number goes here
  var h=today.getHours();
  var m=today.getMinutes();
  var s=today.getSeconds();
  // add a zero in front of numbers&lt;10
  m=checkTime(m);
  s=checkTime(s);
  h=checkTime2(h);
  document.getElementById('clocktxt').innerHTML=h+":"+m+":"+s+ " " +ampm + " " + message;
  t=setTimeout('startTime()',500);
  }
  
  function checkTime(i)
  {
  if (i&lt;10)
    {
    i="0" + i;
  message = "How long you gonna sit there?";
    }
  return i;
  }
  
  function checkTime2(i)
  {
  if (i&gt;12)
    {
    i=i-12;
  ampm="PM";
    }
  return i;
  }
  
  
  setInterval(startTime,1000);
  </code></pre>