SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Accurate timer?

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jul 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Accurate timer?

    Does anybody know how to do an accurate timer?

    All timer scripts I see use a system similar to the example below.
    The example is an html file with just one timer in it that shows in the status bar.
    Let it run for one minute and you'll notice the timer indicates 57 when it should be at 60... (at least on my system)

    So 1000 tics does not equal 1 second, it's actually a little bit too slow, or more specifically, it's just not accurate...

    It seems to be a rounding error because when using 60 000 tics, it does update the count by one at exactly the right second after one minute...

    Code:
    <HTML>
    <HEAD>
    <script LANGUAGE="JavaScript">
    var gTimer1 = null;
    var gTimer1Count = -1;
    
    function Timer1()
    {
    	gTimer1Count++;
    	window.status = "Timer1 Running - " + gTimer1Count;
    	gTimer1 = window.setTimeout("Timer1()",1000);
    }
    
    function Timer1BtnStart()
    {
    	if (gTimer1==null)
    		Timer1();
    }
    
    function Timer1BtnStop()
    {
    	if (gTimer1!=null)
    	{
    		window.clearTimeout(gTimer1);
    		gTimer1 = null;
    		window.status = "";
    	}
    }
    </script>
    </HEAD>
    <BODY>
    <form id=form1 name=form1>
    <p><input type="button" value="Start Timer1" onClick="Timer1BtnStart()" id=button1 name=button1>&nbsp;
    <input type="button" value="Stop Timer1" onClick="Timer1BtnStop()" id=button2 name=button2></p>
    </BODY>
    </HTML>

  2. #2
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This was quite intersting to build up. The javascript timer does not work on even seconds because it takes some time to actually execute the commands in between the loops. So, I built an system that checks the time between the loops and takes an average of it. Then it adjusts the next loop count to make it more even.

    Hope it helps.

    Code:
    <HTML>
    <HEAD>
    <script LANGUAGE="JavaScript">
    var gTimer1 = null;
    var gTimer1Count = -1;
    var date1 = new Date();
    var datediff = 0
    var oldDate
    var vardate = 1000
    
    function Timer1()
    {
    	gTimer1Count++;
    	date1 = new Date();
    	date1 = date1.getTime()
    	
    	if (gTimer1Count>0)
    		datediff = ((date1-oldDate)-1000*gTimer1Count)/gTimer1Count
    	else
    		datediff=0
    	
    	vardate=vardate-datediff
    	
    	document.forms.form1.time.value = datediff
    	document.forms.form1.time2.value = vardate
    	document.forms.form1.time3.value = (date1-oldDate)/1000
    	document.forms.form1.time4.value = gTimer1Count
    	
    	gTimer1 = window.setTimeout("Timer1()",vardate);
    }
    
    function Timer1BtnStart()
    {
    	if (gTimer1==null) {
    		oldDate = new Date();
    		oldDate = oldDate.getTime()
    		Timer1();
    	}
    }
    
    function Timer1BtnStop()
    {
    	if (gTimer1!=null)
    	{
    		window.clearTimeout(gTimer1);
    		gTimer1 = null;
    	}
    }
    </script>
    </HEAD>
    <BODY>
    <form id=form1 name=form1>
    <p><input type="button" value="Start Timer1" onClick="Timer1BtnStart()" id=button1 name=button1> 
    <input type="button" value="Stop Timer1" onClick="Timer1BtnStop()" id=button2 name=button2></p>
    Time difference between the last 2:<br>
    <input type="text" name="time"><br>
    Milliseconds used now:<br>
    <input type="text" name="time2"><br>
    Seconds elapsed:<br>
    <input type="text" name="time3"><br>
    Loops:<br>
    <input type="text" name="time4"><br>
    </form>
    </BODY>
    </HTML>

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes Arkkimaagi, that does seem to be doing the trick.
    Very clever, thx

    Since I made this anyway; below is an example where you can see how the loop counter, without adjustment, runs slow after a while:

    Code:
    <HTML>
    <HEAD>
    <SCRIPT>
    function startTimer(){
      loopCount = 0;
      dte = new Date();
      startTime = dte.getTime();
      Timer();
     }
    function Timer(){
      var dte = new Date();
      var newTime = dte.getTime();
      var timeDiff = (newTime - startTime)/1000;
     
      document.forms.timerForm.loopCount.value = loopCount++;
      document.forms.timerForm.Timer.value = timeDiff ;
    
      toggleTimer= window.setTimeout('Timer()',1000);
    }
    function stopTimer(){
      window.clearTimeout(toggleTimer);
      loopCount = 0;
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <CENTER>
    <A href="" onclick="startTimer();return false;">start</a>&nbsp;&nbsp;
    <A href="" onclick="stopTimer();return false;">stop</a>
    <FORM id="timerForm">
      loopCount&nbsp;<INPUT name="loopCount"><BR>
      Timer&nbsp;<INPUT name="Timer">
    </FORM>
    </CENTER>
    </BODY>
    </HTML>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •