Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Introduction to Timing Events in JavaScript

In this article I will cover the basic functionality of timing events in JavaScript. The timing events basically includes two methods: setInterval() and setTimeout().

Introduction:

This tutorial will deal with the concept of timing event in JavaScript. The article will cover certain JavaScript functions to implement this time related functionality.

Description:

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.

  1. The setInterval( ) method
  2. setTimeout( ) method

Within the premises of timing events, JavaScript provides individual explanation of each method and the process of terminating the execution of SetInterval.

setInterval() Method:

  • 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.
  • 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. Following script will clear the idea of setInterval () method.

Listing 1: Script of setInterval () method

<html>
<head>
<title>SetInterval Example</title>
</head>
<body>
<p>Click on the button for Periodic Execution of Script </p>
<button onclick="periodic()">Click Here</button>
<script type="text/javascript">
function periodic(){
	setInterval(function(){alert("Welcome to the page.")},3000);
}
</script>
</body>
</html>
 
setinterval () method in which after clicking the button alert box appears after every 2 second

Figure 1: Above figure is output of setinterval () method in which after clicking the button alert box appears after every 2 second .

This is very important to know using setInterval() method alert box appears forever, hence, termination of execution is always needed. ClearInterval() method is used to terminate execution of SetInterval. The clearInterval() method is used to stop further executions of the function specified in the setInterval() method. A global variable is required for the usage of clearInterval() method when creating the intervals. Script will compile the idea of how to terminate the execution program.

Listing 2: Script of clearInterval () method

<html>
<head>
<title>ClearInterval Method </title>
</head>
<body onload="startInterval();">
<left>
<div id="time"></div>
<input type="button" value="Start Showing Time (Execution of Interval)" onclick="startInterval();" />
<input type="button" value="Stop Showing time (Termination of interval)" onclick="stopInterval();" />
</center>
<script language="javascript">
	var TimerHandler;  

	function startInterval(){
        TimerHandler = setInterval("startTime();", 2000);
    }

	function startTime(){
		var tmpDate = new Date();
		document.getElementById('time').innerHTML = tmpDate.toLocaleTimeString();
    }
	
	function stopInterval(){
		clearInterval(TimerHandler);
    }
	
</script>
</body>
</html> 
clearinterval () script which shows how to stop the timer event started by the JavaScript setIntterval() function

Figure 2: Above figure is output of clearinterval () script which shows how to stop the timer event started by the JavaScript setIntterval() function.

setTimeout() Method:

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 new time period is passed for the execution of first parameter.

Listing 3: Script of setTimeout () method

<html>
<head>
<title>SetTimeout Example</title>
</head>
<body>
<p>
 Click to see the alertbox after 3 second 
<input type="button" value="Click Here" onclick="recieveMessage();" />
</p>
<script language="javascript">

function recieveMessage(){
		var screen = setTimeout ( "alert( 'Your are getting message after 3 seconds!!!' )" , 3000);
    }
</script>
</body>
</html> 
setTimeout () method which shows alert box after 3 second

Figure 3: above figure is output of setTimeout () method which shows alert box after 3 second.

Similar to setTimeinterval() method, setTimeout() method also needs to be terminated after the execution. The clearTimeout() method is used to stop the execution of the function specified in the setTimeout() method, which is described in the following listed script.

Listing 4: Script of clearTimeout() method

<html>
<head>
<title>Javascript clearTimeout</title>
</head>
<body >
<center>
<div id="time"></div>
<input type="button" value="Start Timer" onclick="startTimer();" />
<input type="button" value="Terminat Timer" onclick="stopTimer();" />
</center>
<script language="javascript">
var timeOut;
var timeFormat = new Date();
document.getElementById('time').innerHTML = timeFormat.toLocaleTimeString(); 

	function startTimer(){
		var timeFormat = new Date();
		document.getElementById('time').innerHTML = timeFormat.toLocaleTimeString(); 	
		timeOut = setTimeout("startTimer();", 2000);
	}
	
	function stopTimer(){
		clearTimeout(timeOut);
	}
</script>
</body>
</html> 
clearTimeout() method which is used to stop the execution of the function specified in the setTimeout() method

Figure 4: Above figure is output of clearTimeout() method which is used to stop the execution of the function specified in the setTimeout() method.

Conclusion:

Tutorial covered the basic functionality of timing events existing in javascript with simple examples. Hope it will help you to understand the concepts of timing event. If you have any query please comment @Mrbool website.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login