JavaScript supports the timing events. You can execute a method or code in the given time intervals. Timer methods are common in every programming language and it helps in scheduling the events at future defined time. There are two types of Timer methods.
- setInterval()
- setTimeout()
These methods are used to execute code at specific amount of time intervals. This tutorial explains the implementation of these two timer methods. The setInterval() and setTimeout() are both methods of the HTML DOM Window object.
JavaScript – setInterval() Method
The setInterval() method keep triggers the expression again and again until we tell to stop it. It will wait for specific amount of time and then execute the function at given every time interval.
setInterval() Syntax
window.setInterval("function",milliseconds);
setInterval Method Example
<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>setInterval</title>
</head>
<body>
<script type="text/javascript">
function myFunction() {
setInterval("myInterval()",3000)
}
function myInterval(){
alert("Welcome to JavaBeat!!!");
}
</script>
<form>
<input type="button" value="Click" onclick="myFunction();">
</form>
</body>
</html>
- <script type=”text/javascript”> tag is used to define client side script which uses attribute type for specifying MIME type.
- setInterval(“myInterval()”,3000) line function name and length of the time interval between execution.
- alert(“Welcome to JavaBeat!!!”); line displays alert message as specified.
- <input type=”button” value=”Click” onclick=”myFunction();”> tag uses type attribute which defines clickable button, value attribute creates click button and onclick() event occurs when user clicks on the element .
Timers in JavaScript – setInterval Demo
- Save the file as JSsetInterval_example.html in your system.
- Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.
When the execution process is completed successfully we will get the following output:
JavaScript setTimeout() Method
It is used to execute the code at specific amount of time and then execute the function.
Syntax
window.setTimeout("function", milliseconds);
setTimeout() Example
<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>setTimeout</title>
</head>
<body>
<script type="text/javascript">
function myFunction() {
setTimeout("myInterval()",3000)
}
function myInterval(){
alert("Welcome to JavaBeat!!!");
}
</script>
<form>
<input type="button" value="Click" onclick="myFunction();">
</form>
</body>
</html>
- <script type=”text/javascript”> tag is used to define client side script which uses attribute type for specifying MIME type.
- setTimeout(“myInterval()”,3000) line indicates that it will wait for specific amount of time and execute the function.
- alert(“Welcome to JavaBeat!!!”); line displays alert message after specified interval.
- <input type=”button” value=”Click” onclick=”myFunction();”> tag uses type attribute which defines clickable button, value attribute creates click button and onclick() event occurs when user clicks on the element .
Timers in JavaScript – setTimeOut Demo
- Save the file as JSsetTimeout_example.html in your system.
- Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.
When the execution process is completed successfully we will get the following output:
To stop the execution in setTimeout() method, we use the clearTimeout() method. This method should be specified in the setTimeout() method. To use clearTimeout() method ,we must use global variable when creating the time out method.
clearTimeout Syntax
window.clearTimeout(timeout Variable);
clearTimeout Example
<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>clearTimeout</title>
</head>
<body>
<script type="text/javascript">
var x;
function myFunction() {
x = setTimeout("myFunction()", 3000);
alert("Welcome to JavaBeat!!!");
}
function clearFunc() {
clearTimeout(x);
}
</script>
<form>
<input type="button" value="Click" onclick="myFunction();">
<input type="button" value="Stop" onclick="clearFunc();">
</form>
</body>
</html>
- <script type=”text/javascript”> tag is used to define client side script which uses attribute type for specifying MIME type.
- x = setTimeout(“myFunction()”, 3000); line indicates that it will wait for specific amount of time and execute the function.
- alert(“Welcome to JavaBeat!!!”); line displays alert message as specified.
- clearTimeout(x); line determines that x is the variable of timeout as returned from the setTimeout() method.
- <input type=”button” value=”Click” onclick=”myFunction();”> tag uses type attribute which defines clickable button, value attribute creates click button and onclick() event occurs when user clicks on the element .
Timers in JavaScript – clearTimeOut Demo
- Save the file as JSclearTimeout_example.html in your system.
- Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.
When the execution process is completed successfully we will get the following output:
Alert Messages in Javascript