Timing Events in JavaScript : JavaScript Timers


With JavaScript, it is possible to execute some code after a specified time interval.
This is called timing events.

So it is like: if you want to execute a code 2 minutes later from the page load , you can do that with a simple trick and here the trick is given to us by “God of Client Side Programming” JavaScript.

JavaScript Timing Events

It’s very easy to time events in JavaScript. The two key methods that are used are:

  • setTimeout() – executes a code some time in the future
  • clearTimeout() – cancels the setTimeout()

Note: The setTimeout() and clearTimeout() are both methods of the HTML DOM Window object.

setTimeout()

Syntax

var t = setTimeout("javascript statement",milliseconds);

The setTimeout() method returns a value – In the statement above, the value is stored in a variable called t. If you want to cancel this setTimeout(), you can refer to it using the variable name.

The first parameter of setTimeout() is a string that contains a JavaScript statement. This statement could be a statement like “alert(‘5 seconds!’)” or a call to a function, like “alertMsg()”.

The second parameter indicates how many milliseconds from now you want to execute the first parameter.

Note: There are 1000 milliseconds in one second.

Example

When the button is clicked in the example below, an alert box will be displayed after 5 seconds.

<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()">
</form>
</body>
</html>

Example – Infinite Loop

To get a timer to work in an infinite loop, we must write a function that calls itself. In the example below, when the button is clicked, the input field will start to count (for ever), starting at 0:

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c;
c = c+1;
t = setTimeout("timedCount()",1000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!"
onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>
</html>

clearTimeout()

Syntax

clearTimeout(setTimeout_variable)

Example

The example below is the same as the “Infinite Loop” example above. The only difference is that we have now added a “Stop Count!” button that stops the timer:

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function stopCount()
{
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!"
onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!"
onClick="stopCount()">
</form>
</body>
</html>

 

Taken from W3SCHOOLS Site : http://www.w3schools.com/js/js_timing.asp 
This small article helps me great , so I think somebody will find it useful.

Browser detection and Redirection using Javascript


Browser detection allows you to find out what browser your viewer is using, and then perform a script based on it– or just to send a friendly message to those with your favorite browser.

You might come around a situation when you need to include different Javascript files for different browsers, or call different function. This script will hep you doing that.

There are two objects often used for this, the navigator.appName and navigator.appVersion objects. The first one returns the name of the browser, the second returns the version of the browser.

If the browser is Netscape, navigator.appName returns the string “Netscape”. If it is Internet Explorer, it returns the string “Microsoft Internet Explorer”. Using just this, you could make a script to alert people as to what browser they are using (just to bug them). Like this:

<HEAD> 
<SCRIPT language="JavaScript"> 
<!-- 
var browserName=navigator.appName; 
if (browserName=="Netscape") { 
alert("Hi Netscape User!"); 
} else  { 
if (browserName=="Microsoft Internet Explorer")  { 
alert("Hi, Explorer User!"); 
}  else   { 
alert("What ARE you browsing with here?"); 
} 
} //--> </SCRIPT> 
</HEAD>

You can do the same thing with the navigator.appVersion, except you will most likely want to grab just the integer from the version information (2,3,4, etc.). To do this, we use the parseInt() function:

var browserVer=parseInt(navigator.appVersion);

Now, it returns only the integer value and not something like version 4.51. It just sends back 4 in that case. Thus, we could alert viewers as to whether their browser is new enough for us or not:

<HEAD> 
<SCRIPT language="JavaScript"> 
<!-- 
var browserVer=parseInt(navigator.appVersion); 
if (browserVer >= 4) { 
alert("Your browser is new enough for my site."); 
} else { 
alert("I think you need a new browser!"); 
} //--> 
</SCRIPT> 
</HEAD>

Of course, you can use both objects to be more exact. You could look for a certain set of browsers and only if they are above a certain version:

<HEAD> 
<SCRIPT language="JavaScript"> 
<!-- 
var browserName=navigator.appName; 
var browserVer=parseInt(navigator.appVersion); 
if ((browserName=="Netscape" && browserVer>=3) || 
(browserName=="Microsoft Internet Explorer" && browserVer>=4)) 
version="n3"; 
else 
version="n2"; 
if (version=="n3") 
alert("Your browser passes the test"); 
else 
alert("You need an upgrade, I think."); 
//-->  

</SCRIPT> </HEAD>

 It is basically saying that “if the browser name is Netscape and it is version 3 or greater, OR if the browser name is Microsoft Internet Explorer and the version is 4 or greater, then we will assign the variable version as ‘n3’. Otherwise, it is going to be ‘n2.’ Then we move on to the rest.”

One of the more common uses for browser detection is to redirect a viewer to a page made for his/her browser type or browser version.

Redirection Using Javascript:

Redirection is often used to take viewers to a page depending on their browser’s name or version. To redirect a viewer instantly, you just need to add a short command in your head section:

<HEAD> 
<SCRIPT language="JavaScript"> 
<!-- 
window.location=http://someplace.com; 
//--> 
</SCRIPT> 
</HEAD>
Or you can use
<HEAD> 
<SCRIPT language="JavaScript"> 
 <!-- 
document.location.href=http://someplace.com ; 
//--> 
</SCRIPT> 
</HEAD>

This would take the viewer right to the url you used as soon as they start loading the page. Sometimes this is done if a site has moved to another location. Another use for it is to detect a browser type and redirect your viewers to one page for Netscape, another of Internet Explorer, or a third for other browsers:

<HEAD> 
<SCRIPT language="JavaScript"> 
<!-- 
var browserName=navigator.appName; 
if (browserName=="Netscape") { 
window.location=http://www.someplace.com/ns.html; 
} else  { 
if (browserName=="Microsoft Internet Explorer")  { 
window.location="http://www.someplace.com/ie.html"; 
}  else   { 
window.location=http://www.someplace.com/other.html; 
} 
} //--> </SCRIPT> </HEAD>

This uses the browser detection method from the previous section. Rather than popping up an alert box, we redirect the viewer to a page that best suits the browser being used.

If you want to have one page for version 4 browsers and another for others, we can take another script from the previous section and change it in the same way:

<HEAD> 
<SCRIPT language="JavaScript"> 
<!-- 
var browserVer=parseInt(navigator.appVersion); 
if (browserVer >= 4) { 
 window.location=http://www.someplace.com/v4.html; 
} else { 
window.location=http://www.someplace.com/other.html; 
} //--> 
</SCRIPT> 
</HEAD>

You can also use this to help people who come into your site, but come in on a page that should be within a frameset that you use for navigation. Using the top.frames.length object, you can find out if the page is in a frame or not. If the value is zero, the page is not in a frame. If it is greater than zero, the page is inside a frame. So, you could take the viewer back to your main frameset page using a script like this:

<HEAD> 
<SCRIPT language="JavaScript"> 
<!-- 
function getgoing()   { 
top.location="http://someplace.com"; 
} 
if (top.frames.length==0)     { 
 alert("You will be redirected to our main page in 10 seconds!"); 
setTimeout('getgoing()',10000); 
 } //--> 
</SCRIPT> 
</HEAD>

This will alert the viewer and take them to the main page after 10 seconds. You can change the number in the setTimeout function to adjust the time if you like.

You can also use it to break a viewer out of someone else’s frames if they followed a link that didn’t have the target set correctly. It uses the same idea in reverse:

<HEAD> 
<SCRIPT language="JavaScript"> 
<!-- 
function getgoing() 
{     top.location="http://someplace.com"; 
 } 
 if (top.frames.length > 0){ 
 alert("The frames will be broken in ten seconds."); 
 setTimeout('getgoing()',10000); 
} //--> 
 </SCRIPT> 
 </HEAD>

As you can see, redirection can be a handy tool at times. Just use it with caution if you are worried about the search engines.