Javascript Timer Function
Timer functions in javascript provide the functionality to delay the function
call for a certain time or to call a function continuously after a regular
interval of time.
There are 2 different types of timer functions in javascript:
1. setInterval()
2. setTimeout()
1. setInterval Function
The setInterval() method sets a time interval that calls a function or
evaluates an expression at specified intervals (in milliseconds).
The setInterval() method is global and can be used in any window.
setInterval(function, interval)// or
setInterval(code, interval)
The method contains 2 parameters:
function/code - The function/code to be executed
interval - The time, in milliseconds (thousandths of a second), the timer
should delay in between executions of the specified function or code.
In the following example, the setInterval function repeatedly prints
counting after 1 second.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript - setInterval</title>
</head>
<body>
<h2>Using "setInterval" method to print next counting after 1 second.</h2>
<p id="output"></p>
<script>
var count = 1;
var element = document.getElementById("output");
function counting(){
element.innerHTML += count + "<br>";
count++;
}
setInterval(counting, 1000);
</script>
</body>
</html>
How To Stop setInterval() From Calling A
Function?
If you don't stop the setInterval method from calling the function then it
will keep executing the function till infinity. So we need to stop the
interval.
To stop the setInterval() method use clearInterval() method and pass
the instance of setInterval() function (When called setInterval() method
it returns an instance which can be stored in a variable).
var intervalInstance = setInterval();
clearInterval(intervalInstance);
The following example contains a button that onclick clears the interval of
the counter function.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript - clearInterval</title>
</head>
<body>
<h2>Using "clearInterval" method to stop printing.</h2>
<button onclick="clearIt()">Clear Interval</button>
<p id="output"></p>
<script>
function clearIt(){
clearInterval(interval); //clearing interval
}
var interval = setInterval(counting, 1000);
var count = 1;
var element = document.getElementById("output");
function counting(){
element.innerHTML += count + "<br>";
count++;
}
</script>
</body>
</html>
2. setTimeout Function
The setTimeout() method calls a function or evaluates an expression after
a specified number of milliseconds.
Unlike setInterval() method, setTimeout() method is called only once.
setTimeout(function, interval) // or
setTimeout(code, interval)
The method contains 2 parameters:
function/code - function or code you want to execute after a certain
time.
interval - It is given time in milliseconds after which the function or
code will be executed.
The following example shows the current time after 3 seconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript - setTimeout</title>
</head>
<body>
<h2>Using "setTimeout" method to execute a function after a fixed amount of time.</h2>
<p id="output"></p>
<script>
setTimeout(printTime, 3000);
var element = document.getElementById("output");
function printTime(){
element.innerHTML = new Date();
}
</script>
</body>
</html>
How To Stop setTimeout() From Calling A
Function?
The clearTimeout() method stops the function execution in setTimeout().
The clearTimeout() method is a window method, so can be used with or
without referring to the window
<button onclick="stopIt()">Stop</button>
clearTimeout(timeoutReference);
var timeoutReference = setTimeout();
The setTimeout() method returns a reference that is passed in
the clearTimeout() as an argument to clear timeout.
The following method prints time after three seconds, stopping it from
printing by clearing setTimeout().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript - setTimeout</title>
</head>
<body>
<h2>Using "setTimeout" method to execute a function after a fixed
amount of time.</h2>
<button onclick="printTime()">Print Time</button>
<button onclick="stopIt()">Stop</button>
<p id="output"></p>
<script>
var ref;
var element = document.getElementById("output");
function printTime() {
ref = setTimeout(showTime, 3000);
function stopIt() {
clearTimeout(ref);
function showTime() {
element.innerHTML = new Date();
}
</script>
</body>
</html>
When To Use setInterval() And
setTimeout()?
Let's look at some scenarios and see what javascript functionality to use to
invoke functions in the given scenarios.
Scenario What to use
To invoke the function for Use javascript loop, loop for 'n' number of times, and invoke a function in each
'n' number of times iteration
To invoke a function on Use 'addEventListener' method and bind the function with the desired event
some event
Invoke a function after Use setTimeout() method
some time
Invoke a function regularly Use setInterval() method
at a certain interval of time
