Solved

countdown timer out of sync with timeout

Posted on 2008-10-21
2
448 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

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

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 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…

690 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