<Previous Lesson> [Table of Contents]
In order to create animation using javascript, we need to use a kind of timer so that an object changes according to a certain time interval. In Javascript, we use the setInterval() method as a timer.
The setInterval() Method
The setInterval() method calls a function or runs an expression at specified intervals (in milliseconds). The syntax is as follows:
setInterval(myfunction, time interval).)
The setInterval method runs a function created by you at a certain time interval in milliseconds. For example, a time interval of 1000 equals to 1 second. To execute a function only once, after a specified number of milliseconds, we use the setTimeout() method.
Example 1
<script>
function myFunction() {
setInterval(function(){ alert(“Welcome to JavaScript Tutorial”); }, 1000);
}
</script>);
Running this script produces a popup dialog that displays the message “Welcome to JavaScript Tutorial” every two seconds.
Example 2
You can also refer to a function; Alert “Hello” every 3 seconds (3000 milliseconds):
var myVar;
function myFunction() {
myVar = setInterval(alertFunc, 3000);
}
function alertFunc() {
alert(“Hello!”);
}
Example 3
Display the current time (the setInterval() method will execute the function once every 1 second, just like a digital watch):
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById(“demo”).innerHTML = t;
}
The clearInterval Method
The clearInterval() method clears a timer set with the setInterval() method.
The ID value returned by setInterval() is used as the parameter for the clearInterval() method.
The syntax is
clearInterval(id_of_setinterval)
Example 4
To run and stop and popup dialog
<button onclick=”myFunction()”>Run it</button><br>
<button onclick=”myFunction2()”>Stop it</button>
<script>
var myVar;
function myFunction() {
myVar = setInterval(alertFunc, 2000);
}
function myFunction2() {
clearInterval(myVar);
}
function alertFunc() {
alert(“Hello!”);
}
</script>
Example 5
In this example, the setInterval() method executes the setColor() function once every 300 milliseconds, which will toggle between two background colors. The stopColor function will stop the animation using the clearInterval method.
<button onclick=”stopColor()”>Stop Toggling</button>
<script>
var myVar = setInterval(function(){ setColor() }, 300);
function setColor() {
var x = document.body;
x.style.backgroundColor = x.style.backgroundColor == “yellow” ? “pink” : “yellow”;
}
function stopColor() {
clearInterval(myVar);
}
</script>
Example 6
This script create a clock. It is stopped by using the clearInterval method
<p>A script on this page starts this clock:</p>
<p id=”demo”></p>
<button onclick=”myStopFunction()”>Stop time</button>
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById(“demo”).innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar);
}
</script>