ECMAScript setTimeout and setInterval Function
View more Tutorials:
In the ECMAScript, setTimeout(func, time) and setInterval(func,time) are two quite similar functions. They are timed to perform a duty. In this lesson, I am going to discuss each of these functions in turn.
The setTimeout(func, delay) function establishes a millisecond 'delay' time period, when this time period passes the func function will be called only one time.
Note: 1 second = 1000 miliseconds
The Syntax:
setTimeout(func, delay)
- func: This function will be called after 'delay' milliseconds.
- delay: delay time period (in milisecond)
Below is the simple example with the setTimeout() function. 3 seconds after the use clicks "Show greeting", a greeting will display.
setTimeout-example.html
<!DOCTYPE html> <html> <head> <title>setTimeout function</title> <script type="text/javascript"> function greeting() { alert("Hello Everyone!"); } function startAction() { setTimeout(greeting, 3000); // 3 seconds. } </script> </head> <body> <h2>setTimeout Function</h2> <button onclick="startAction()">Show greeting</button> </body> </html>

Another example with the setTimeout() function, you can run this example on the NodeJS environment:
setTimeout-example.js
console.log("3"); console.log("2"); console.log("1"); console.log("Call setTimeout!"); setTimeout( function() { console.log("Hello Everyone!"); }, 3000); // 3 seconds console.log("End!");

clearTimeout()
Suppose you call the setTimeout() function to schedule to perform a task, while the task is not started performing, you can cancel that task by calling the clearTimeout() function.

clearTimeout-example.html
<!DOCTYPE html> <html> <head> <title>clearTimeout function</title> <script type="text/javascript"> var myTask = null; function greeting() { alert("Hello Everyone!"); myTask = null; } function startAction() { if(!myTask) { myTask = setTimeout(greeting, 3000); // 3 seconds. } } function cancelAction() { if(myTask) { clearTimeout(myTask); myTask = null; } } </script> </head> <body> <h2>setTimeout() & clearTimeout() Function</h2> <button onclick="startAction()">Show greeting</button> <button onclick="cancelAction()">Cancel</button> </body> </html>
The setInterval(func, delay) function establishes a milisecond 'delay' time period. After each milisecond 'delay', the func function is called.
Syntax:
setInterval(func, delay)
- func: This function will be called after each millisecond 'delay' time period.
- delay: Delay time period (in milisecond)
Below is a simple example with the setInterval() function.3 seconds after the user clicks the "Show greeting" button, a greeting will display, and it will display again after 3 seconds, ..

setInterval-example.html
<!DOCTYPE html> <html> <head> <title>setInterval function</title> <script type="text/javascript"> function greeting() { alert("Hello Everyone!"); } function startAction() { setInterval(greeting, 3000); // 3 seconds. } </script> </head> <body> <h2>setInterval Function</h2> <button onclick="startAction()">Show greeting</button> </body> </html>
Another example with the setInterval() function, you can run this example on the NodeJS environment:
setInterval-example.js
console.log("3"); console.log("2"); console.log("1"); console.log("Call setInterval!"); setInterval( function() { console.log("Hello Everyone!"); }, 3000); // 3 seconds console.log("End!");

clearInterval()
Suppose you call the setInterval() function to schedule to perform a task, you can cancel that task by calling the clearInterval() function.

clearInterval-example.html
<!DOCTYPE html> <html> <head> <title>clearInterval function</title> <script type="text/javascript"> var myTask = null; function greeting() { alert("Hello Everyone!"); } function startAction() { if(!myTask) { myTask = setInterval(greeting, 3000); // 3 seconds. } } function cancelAction() { if(myTask) { clearInterval(myTask); myTask = null; } } </script> </head> <body> <h2>setInterval() & clearInterval() Function</h2> <button onclick="startAction()">Show greeting</button> <button onclick="cancelAction()">Cancel</button> </body> </html>