Controlling the ASP.NET Timer Control with JavaScript

Have you ever wanted to control your <asp:Timer> control from client-side code?

Let’s say you’ve named your timer ‘Timer1’. The first step is to create a reference to this component:

var timer = Sys.Application.findComponent(‘<%= Timer1.ClientID %>’);

Or, better yet, use the $find() shortcut:

var timer = $find(‘<%= Timer1.ClientID %>’);

You can then easily access the timer’s interval and enabled properties, as well as start and stop the timer.

//returns the timer’s interval in milliseconds:
var waitTime = timer.get_interval;       

//sets the timer’s interval to 5000 milliseconds (or 5 seconds):
timer.set_interval(5000);       

//returns whether or not the timer is enabled:
var isTimerEnabled = timer.get_enabled();       

//disables the timer:
timer.set_enabled(false);       

//starts the timer:
timer._startTimer();       

//stops the timer:
timer._stopTimer();

For the more adventurous of you who would like to look at the client-side behavior code for the Timer control and who elected to download the source code for the AJAX Control Toolkit, you can probably find the .js file at:

Drive:\Program Files\Microsoft ASP.NET\AJAX Control Toolkit\AJAXControlToolkit\Compat\Timer\Timer.js

(If you don’t know what you are doing, do not make any changes to this file!)