Solved

countdown timer out of sync with timeout

Posted on 2008-10-21
2
438 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

831 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