Implementing Count Down Timer On Web Page – Lessons Learned

Recently I was working on a small project where I had to implement count down timer on a web page so that when it expires certain action happens (e.g. form submit). Also this timer had to perform synchronization with server side based on user’s browsing session so that user can’t trick it by reentering the page.  Here are some lessons learned:

1. Don’t reinvent the wheel. There are thousands of samples on the Internet that show how to implement the countdown timers in JavaScript, Flash, etc . I’m a big fan of jQuery so I decided to go this route and looked for jQuery plugin. I found the one called jQuery Countdown that looked very promising so I decided to use it
2. Make sure that you account for situation when user uses Back/Forward browser buttons to re-initiate the timer. If you want to prevent this from happening you need to implement synchronization with server each time user visits timer page. I.e. when user first loads web page with timer you need to store the current time on the server. Then every time this page loads do the AJAX call to see if this user has already started the timer and how much time is left
3. Never rely on client side’s system time to perform timer related calculations (e.g. how much time is left). Let’s say you retrieve the time stamp from the server of when user initiated the timer. Don’t compare this time stamp with user’s system time to determine how much time is left for the timer. You don’t know what time zone user is in. Perform all time related calculations on the server and return “time left” to the client instead.
4. Important: Make sure that timer component you use doesn’t rely on client side’s system time to operate properly. To verify this just change your system time while timer is counting down. For example let’s say you have timer set for 5 minutes and it start counting down. Then you change your system time one hour back. Make sure that one additional hour wasn’t added to countdown. I had this exact problem with  jQuery Countdown plugin and had to replace it with other JavaScript code

I hope these advices will help you to avoid the problems I run into and implement robust countdown timer for your web application.