Quick Reach
setInterval method
In the previous chapter, we learnt how to use setTimeout method to execute a given function or code only once, by the given time interval. If you need to execute a function or code repeatedly by given time interval, use the setInterval method of JavaScript.
The setInterval method keeps on executing given function or code by given time interval until the window is closed or you can use the clearInterval method to stop it.
See an example of setInterval method
In this tutorial, we will show you examples of using setInterval and later clearInterval method to stop executing a function, let us first look at its syntax.
Syntax to use javascript setInterval
This is how you can use setInterval method:
setInterval (Function_name()|Code, time_in_milliseconds);
Or you can use it with “window” as follows:
window.setInterval (Function_name()|Code, time_in_milliseconds);
Now let us look at a few examples of using the setInterval method.
The setInterval method returns a value of the timer. This is particularly useful if you need to stop executing a function by using the clearInterval method as shown in the following example.
The setInterval example of executing code
Following is an example of using JS setInterval method. We will simply display an alert with the gap of two seconds. As you close alert it will be triggered again and again by the two-seconds gap till you refresh the page or close the window. See working example by clicking the link below:
Experience this example online
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<body>
<button onclick=“exec_setInterval()”>Click here to execute setInterval</button>
<script type=“text/javascript”>
function exec_setInterval(){
window.setInterval(“alert(‘setInterval demo!’)”, 2000);
}
</script>
</body>
</html>
|
You can see, after clicking the button “Click here to execute setInterval” an alert will be shown after two seconds. After you close alert by clicking OK or Cross button it will be displayed again after two seconds and so on, as such we specified two seconds delay in window.setInterval method.
setInterval example of executing a function
In this example, we will use a function inside javascript setInterval method. The function will also show an alert after two seconds gap.
Experience this example online
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html>
<body>
<button onclick=“exec_setInterval()”>Click here to execute setInterval Javascript</button>
<script type=“text/javascript”>
function exec_setInterval(){
window.setInterval(“showalert()”, 2000);
}
function showalert(){
alert(“setInterval demo!”);
}
</script>
</body>
</html>
|
As you can see, given function showalert() is executing after two seconds and displays an alert.
Javascript clearInterval example
Following is an example of the clearInterval method. As such clearInterval method is used to stop execution started by the setInterval method. In this example, we will use the ID value returned by the setInterval method in the clearInterval method.
As you click on left button, “Click here to execute setInterval Javascript” it will start showing alert after two seconds. This will keep on executing unless you click on the right button “Stop execution by clearInterval”. See working example by clicking the link below:
Experience this example online
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html>
<html>
<body>
<button onclick=“st_setInterval()”>Click here to execute setInterval Javascript</button>
<button onclick=“clearredir()”>Stop function by clearInterval</button>
<script type=“text/javascript”>
var stopalert;
function showalert(){
alert(“setInterval demo!”);
}
function st_setInterval(){
stopalert = setInterval(“showalert()”, 2000);
}
function clearredir(){
clearInterval(stopalert);
}
</script>
</body>
</html>
|
As you can see the alert will keep on showing, by using setInterval method while execution is stopped by using the clearInterval method.
Also see: Javascript setTimeout | Javascript innerHTML | Javascript redirect
Leave A Comment?