Javascript setInterval and clearInterval method with example
Hello guys,
Sometimes you might want to run function or piece of code at the specific time interval. This is mostly used when you want to update data at a given time or want to refresh page.
In this example, I will explain how you can execute Javascript code at the specific time interval. I will also include how you can stop this interval to run code.
setInterval method
The setInterval method executes specified function or piece of code at a given time interval.
Syntax
setInterval(function, milliseconds, arg1, arg2, ...)Where:
function which executes at a given specific time.
milliseconds is time interval
arg1, arg2 parameters pass in the function.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>setInterval method</title>
</head>
<body>
<div id="number">0</div>
<script type="text/javascript">
setInterval(function() {
var data = document.getElementById('number').textContent;
document.getElementById('number').textContent = Number(data) + 1;
}, 1000);
</script>
</body>
</html>clearInterval method
clearInterval method cancels the code to be execute set in setInterval method.
Syntax:
clearInterval(setIntervalVariable)Where:
setIntervalVariable is the variable defined for setInterval method.
This is useful to stop executing code set in setInterval method.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>clearInterval method</title>
</head>
<body>
<div id="number">0</div>
<button onclick="increment()">Start</button>
<button onclick="stopIncrement()">Stop</button>
<script type="text/javascript">
var startIncrement;
function increment() {
startIncrement = setInterval(function() {
var data = document.getElementById('number').textContent;
document.getElementById('number').textContent = Number(data) + 1;
}, 1000);
}
function stopIncrement() {
clearInterval(startIncrement);
}
</script>
</body>
</html>So far in this article, we have learn how to execute Javascript code at a specific interval time. We have also learned to prevent executing code set in setInterval method. I hope you liked the article.
Copyright 2023 HackTheStuff
