We can use server side timer control that is available in AJAX library. But often we need timer that works on client only. Server Timer control posts back every time when tick event is raised. I need the similar control, that raises this event on client.
I found one very good sample, and to not waste time and reinvent already existing, I used this sample to create reusable Timer control.
The sample is from online AJAX docs website, Custom Demo.Timer Component
Here is a code for sample page demonstrating how to use the control:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Devarchive.Net" Namespace="Devarchive.Net" TagPrefix="dn" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
#divOutput
{
border: dashed 1px black;
}
.highlight
{
background-color : Silver;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<dn:Timer runat="server" ID="Timer1" Interval="1000" ComponentID="t1" OnTick="onTick" />
<script type="text/javascript">
var i = 0;
var b = false;
function onTick() {
$get("divOutput").innerHTML = new Date().format("HH:mm:ss tt");
$get("divOutput").className = b ? "highlight" : "";
b = !b;
}
function enableTimer() {
$find("t1").set_enabled(true);
updateStatus();
}
function disableTimer() {
$find("t1").set_enabled(false);
updateStatus();
}
function pageLoad(sender, args) {
$find("slider").add_valueChanged(sliderChanged);
updateStatus();
}
function sliderChanged(sender, args) {
var interval = parseInt($find("slider").get_Value());
$find("t1").set_interval(interval);
updateStatus();
}
function updateStatus() {
var interval = $find("t1").get_interval();
var enabled = $find("t1").get_enabled();
$get("divDetails").innerHTML =
String.format(
"Interval: {0} ms<br />Enabled: {1}",
interval,
enabled
);
$get("btnDisabled").disabled = !enabled;
$get("btnEnabled").disabled = enabled;
}
</script>
<div id="divOutput"> </div>
<div id="divDetails"> </div>
<asp:TextBox runat="server" ID="tbInterval" Text="1000" />
<cc1:SliderExtender BehaviorID="slider" ID="slider" Minimum="10" Maximum="10000"
TargetControlID="tbInterval" runat="server">
</cc1:SliderExtender>
<br />
<input type="button" id="btnEnabled" value="Enable Timer" onclick="enableTimer();" />
<input type="button" id="btnDisabled" value="Disable Timer" onclick="disableTimer();" />
</form>
</body>
</html>
As you see, markup for the control on the page is:
<dn:Timer runat="server" ID="Timer1" Interval="1000" ComponentID="t1" OnTick="onTick" />
Interval - set's the interval in milliseconds,
Enabled - set true to activate timer, or false to deactivate it on the client,
ComponentID - assign id to the control, using this id the component can be referenced from the script using syntax: $find("<ComponentID>),
OnTick - client side function which will be called when next period of time elapses. Alternatively you can attach event handlers from javascript using syntax:
$find(<ComponentID>).add_tick(myHandler), and detach them using syntax: $find(<ComponentID>).remove_tick(myHandler).