Solved

countdown timer out of sync with timeout

Posted on 2008-10-21
2
430 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
Comment Utility
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
Comment Utility
That's great !
Thank you.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now