Solved

countdown timer out of sync with timeout

Posted on 2008-10-21
2
443 Views
Last Modified: 2012-05-05
I have a timeout function in an online test page which disables form input aftyer 15 minutes (time allowed for the test).
However, I also have a countdown timer on the page.
My problem is: the timer' lags behind the timeout event by 3-8 seconds. I don't know if this is significant, but  If I change the value in 'if (if (timeLeft > 100000 ' the the number of seconds the timer is lagging by also changes. for example: I get the smallest lag for 'if (timeLeft > 0)
Is there a solution for this problem.
I copied the script below:

<script type="text/javascript">
var minutes = 15;
var timeLeft = minutes*60*1000;
var tId = "";
var leave = "";
function countdown() {
       timeLeft -= 1000;

      if (timeLeft<=0){
      nextPage();
      } else {
      updateTimer();
   }
 }
window.onload=function() {
  leave = setTimeout("nextPage()", timeLeft);
  tId = setInterval('countdown()',1000);
  updateTimer();

}
function updateTimer() {
   var timerArea = document.getElementById('timer');
   var numSeconds = timeLeft / 1000;
   var displaySeconds = numSeconds % 60;
   var displayMinutes = (numSeconds - displaySeconds) / 60;

   // format display a little more by putting a leading 0 for small seconds
   if (displaySeconds < 10) {
       displaySeconds = "0" + displaySeconds;
   }

      timerArea.value = displayMinutes + ":" + displaySeconds;
}
      function nextPage(){
            //assuming you have <form id="English1"...>
            var f = document.getElementById("English1");
            for( var i=0; i < f.elements.length; ++i)
            {
                    if( String(f.elements[i].type).toLowerCase() != "submit" )
                  f.elements[i].disabled=true;

            }
            clearInterval(tId);
            clearTimeout();
            alert('Time allowed for the English test has expired! Please press the Maths Test button to continue');
      }
       function activate(f){
  if (timeLeft > 100000 && confirm('Are you sure you want to leave the English test? You still have some time left to go back and check your answers. If you are sure you want to go on to the Maths Test, please click OK button. Otherwise, click Cancel button to return to the English test and use the remaining minutes to improve your English score.'))
return false;
            for( var i=0; i < f.elements.length; ++i)
            {
                  f.elements[i].disabled=false;
            }
      return true;
      }
</script>
0
Comment
Question by:Erikal
2 Comments
 
LVL 7

Accepted Solution

by:
mltsy earned 500 total points
ID: 22767948
My guess is the setInterval is just doing a tiny bit of processing that's slowing it down.  I have read that it works more slowly in IE than in other browsers.  My solution would be to run both timers by the same function.

Actually, you're already doing it in your countdown function (calling nextPage if the timer gets down to zero), just remove your redundant setTimeout call for nextPage, and it should work fine!  I mean - the users may have an extra 3 seconds... if that's a problem you can reduce your "timeLeft" by 3 seconds :)
0
 

Author Closing Comment

by:Erikal
ID: 31508196
That's great !
Thank you.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

789 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question