JavaScript Asynchronous
setIntervalruns a function over and over until you stop it.
It works like setTimeout but repeats.
It never stops on its own, so you must always be able to cancel it.
Example
javascript
let count = 0;
const id = setInterval(function () {
count = count + 1;
console.log("tick " + count);
if (count === 3) {
clearInterval(id);
}
}, 10);It ticks three times and then stops itself.
setInterval repeats a function on a fixed delay.
clearInterval stops it, using the id it returned.
Without a clearInterval it runs for as long as the page is open.
Syntax
javascript
const id = setInterval(handler, delay);
clearInterval(id);Keep the id, or you can never stop it.
Counting inside the callback is the usual way to end it.
Example
javascript
let ticks = 0;
const id = setInterval(function () {
ticks = ticks + 1;
if (ticks === 2) {
clearInterval(id);
console.log("stopped after " + ticks);
}
}, 10);The output is stopped after 2.
This is the classic use for a repeating timer.
Example
javascript
let left = 3;
const id = setInterval(function () {
console.log(left);
left = left - 1;
if (left === 0) {
clearInterval(id);
console.log("liftoff");
}
}, 10);The output counts 3, 2, 1 and then liftoff.
An interval with no way to stop keeps running in the background.
On a real page that wastes battery and can leak memory.
Example
javascript
let runs = 0;
const id = setInterval(function () {
runs = runs + 1;
clearInterval(id);
console.log("ran " + runs + " time and stopped");
}, 10);Always know where your clearInterval is.
If the callback takes longer than the delay, runs can bunch up.
A repeating setTimeout avoids that, because it waits after each run.
Example
javascript
let count = 0;
function repeat() {
count = count + 1;
console.log("run " + count);
if (count < 3) {
setTimeout(repeat, 10);
}
}
repeat();Each run schedules the next one only when it has finished.
The id is just a value, so it can be stored and used later.
Example
javascript
let ticks = 0;
const id = setInterval(function () {
ticks = ticks + 1;
}, 10);
function stop() {
clearInterval(id);
return "stopped";
}
console.log(stop());On a page this is usually done in a button's click handler.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript setInterval</title>
</head>
<body>
<h1>setInterval</h1>
<p id="out">0</p>
<button id="stop">Stop</button>
<script>
const out = document.getElementById("out");
let seconds = 0;
const id = setInterval(function () {
seconds = seconds + 1;
out.textContent = seconds;
}, 1000);
document.getElementById("stop").addEventListener("click", function () {
clearInterval(id);
out.textContent = "Stopped at " + seconds;
});
</script>
</body>
</html>Run the above example in the Try It Editor.
Try a faster timer:
Change 1000 to 200 and watch the counter speed up.
setInterval repeats a function on a delay.clearInterval stops it using the returned id.setTimeout avoids overlapping runs.setInterval is right for anything that ticks, like a clock or a countdown.
The one rule is to always keep a way of stopping it.
For work that varies in length, a repeating setTimeout is safer.