Scribd
Upload
17 views13 pages

Timing Events

timing event

Uploaded by

PRINCE RAJ
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
17 views13 pages

Timing Events

timing event

Uploaded by

PRINCE RAJ
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

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>

You might also like