JavaScript Timing Events
• JavaScript facilitates the execution of script
within specific time interval (Periodic
execution). This is known as timing event.
• There are two methods of timing events in
JavaScript.
setInterval( ) method
setTimeout( ) method
setInterval()
• It is used to run a function multiple times with
a delay in between each function i.e. it
executes a specific code over and over again
with the interval of fixed time period.
• The function passed in the first parameter will
run again after a specified time in
milliseconds, in the second parameter.
setInterval()
• In the setInterval() method, it will not execute
a script unless a specific time period has
lapsed and will continue to execute the
function, after each relapse of the given time.
• This method allows specifying a piece of
JavaScript code (expression) that will be
triggered again and again after every specified
number of milliseconds.
setInterval()
<html>
<body>
<button onclick="periodic()">Click Here</button>
<script>
function periodic()
{
setInterval(function(){
alert("hello")
},3000);
}
</script>
</body>
</html>
setInterval()
<html>
<body>
<button onclick="setInterval(periodic,3000)">ClickHere</button>
<script>
function periodic()
{
alert("hello")
}
</script>
</body>
</html>
setInterval()
<html>
<body>
<button onclick="periodic()">click</button>
<script>
function periodic()
{
setInterval(func,3000)
function func(){
alert("hello");
}
}
</script>
</body>
</html>
clearInterval()
• Using setInterval() method alert box appears
forever, hence, termination of execution is
always needed.
• ClearInterval() method is used to terminate
execution of SetInterval.
clearInterval()
<html>
<body>
<button onclick="periodic()">click</button>
<script>
function periodic()
{
varp=setInterval(func,3000)
function func(){
alert("hello");
}
clearInterval(p);
}
</script>
</body>
</html>
setTimeout()
• In setTimeout() method, the function will not
be executed unless and until a specified
number of milliseconds has lapsed.
• There is generally a function name in the first
parameter of setTimeout().
• In the second parameter, the time period is
passed for the execution of first parameter.
setTimeout()
<html>
<body>
<button onclick="periodic()">Click</button>
<script>
function periodic()
{
setTimeout(function(){
alert("hello")
},3000);
}
</script>
</body>
</html>
clearInterval after setTimeout
<html>
<body>
<button onclick="periodic()">click</button>
<script>
function periodic()
{
varp=setInterval(func,3000)
function func(){
alert("hello");
}
setTimeout(function()
{
clearInterval(p);
},12000)
}
</script>
</body>
</html>
clearTimeout
clearTimeout() method which is used to stop the
execution of the function specified in the
setTimeout() method.
clearTimeout
<html>
<body>
<button onclick="periodic()">Click</button>
<script>
function periodic()
{
vara=setTimeout(function(){
alert("hello")
},3000);
clearTimeout(a);
}
</script>
</body>
</html>
