Home » JavaScript » Javascript Timer Example

About Saeb Najim

Saeb Najim
Saeb has graduated from the University of Technology. During the last ten years (since 2005) he has been involved with a large number of projects about programming, software engineering, design and analysis . He works as a senior Software Engineer in the e-commerce and web development sector where he is mainly responsible for projects based on Java, Java frameworks, design patterns and Big Data technologies.

Javascript Timer Example

The aim of this example is to explain the timing events in javascript.

The javascript window.setTimeout(function, milliseconds) function is used to execute a function, after waiting a specified number of milliseconds. This method returns a timeout id.
 
 
 
 
 
 
 
 

 
Notice, setTimeout and window.setTimeout are essentially the same, the only difference being that in the second statement we are referencing the setTimeout method as a property of the global window object.

The javascript clearTimeout(timeoutID) function is used to stop the given timer.

Following tips are very important when working with this function

  • The function is only executed once. If you need to repeat execution, use the setInterval() method.
  • Use the clearTimeout() method to prevent the function from running.

1. HTML

First of all you need to create a simple html documents.

timerExample.html

<!DOCTYPE html>
<html>
<head>
	<title>javascript timer example</title>
</head>
<body>

</body>
</html>

2. Javascript Timer Examples

2.1 Show alert after 3 seconds

This example sets a timer to call the given method after 3 seconds. As you can notice, the setTimeout(function, milliseconds) function takes two parameters, the first is the method name and the second is the interval time in milliseconds.

Click a button. Wait 3 seconds, and the page will alert “Hello”:

<button onclick="setTimeout(myFunction, 3000)">Try it</button>

<script>
	function myFunction() {
		alert('Hello');
	}
</script>

The result in the browser would be:

Show alert after 2 seconds

Show alert after 3 seconds

2.2 Stop javascript timer

The javascript clearTimeout(timeoutID) is used to stop the timer by using the given timeoutID. The javascript setTimeout(function, milliseconds) function returns a timeout id that can be passed to this method.

<button onclick="myVar = setTimeout(myFunction, 2000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>

<script>
	function myFunction() {
		alert('Hello');
	}
</script>

The result in the browser would be:

Stop javascript timer

Stop javascript timer

2.3 O’clock example

As you can notice, in the line 4 of the following javascript code, we call the startTime() method to show o’clock and set a timer. This timer will call the startTime() method after a half of second. That will help us to update the o’clock values.

<div id="txt"></div>

<script>
	startTime();
	function startTime() {
		var today = new Date();
		var h = today.getHours();
		var m = today.getMinutes();
		var s = today.getSeconds();
		// add a zero in front of numbers<10
		m = checkTime(m);
		s = checkTime(s);
		document.getElementById("txt").innerHTML = h + ":" + m + ":" + s;
		var t = setTimeout(function(){ startTime() }, 500);
	}

	function checkTime(i) {
		if (i < 10) {
			i = "0" + i;
		}
		return i;
	}
</script>

The result in the browser would be:

O'clock example

O’clock example

4. Download the Source Code

Download: You can download the full source code of this example here: Javascript Timer Example
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments