Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

Javascript Timer Function

The document explains timer functions in JavaScript, specifically setInterval() and setTimeout(). setInterval() repeatedly calls a function at specified intervals, while setTimeout() calls a function once after a specified delay. It also describes how to stop these functions using clearInterval() and clearTimeout().

Uploaded by

shubrattporwal
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Javascript Timer Function

The document explains timer functions in JavaScript, specifically setInterval() and setTimeout(). setInterval() repeatedly calls a function at specified intervals, while setTimeout() calls a function once after a specified delay. It also describes how to stop these functions using clearInterval() and clearTimeout().

Uploaded by

shubrattporwal
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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

You might also like