• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Timers in JavaScript

April 11, 2014 //  by Krishna Srinivasan//  Leave a Comment

JavaScript supports the timing events. You can execute a method or code in the given time intervals. Timer methods are common in every programming language and it helps in scheduling the events at future defined time. There are two types of Timer methods.

  1. setInterval()
  2. setTimeout()

These methods are used to execute code at specific amount of time intervals. This tutorial explains the implementation of these two timer methods. The setInterval() and setTimeout() are both methods of the HTML DOM Window object.

JavaScript – setInterval() Method

The setInterval() method keep triggers the expression again and again until we tell to stop it. It will wait for specific amount of time and then execute the function at given every time interval.

setInterval() Syntax

window.setInterval("function",milliseconds);

setInterval Method Example

<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>setInterval</title>
</head>
<body>
	<script type="text/javascript">
		function myFunction() {
			setInterval("myInterval()",3000)
		}
		function myInterval(){
			alert("Welcome to JavaBeat!!!");
		}
	</script>
	<form>
		<input type="button" value="Click" onclick="myFunction();">
	</form>
</body>
</html>
  • <script type=”text/javascript”> tag is used to define client side script which uses attribute type for specifying MIME type.
  • setInterval(“myInterval()”,3000) line function name and length of the time interval between execution.
  • alert(“Welcome to JavaBeat!!!”); line displays alert message as specified.
  • <input type=”button” value=”Click” onclick=”myFunction();”> tag uses type attribute which defines clickable button, value attribute creates click button and onclick() event occurs when user clicks on the element .

Timers in JavaScript – setInterval Demo

  • Save the file as JSsetInterval_example.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

When the execution process is completed successfully we will get the following output:

Timers in JavaScript - setInterval Demo

JavaScript setTimeout() Method

It is used to execute the code at specific amount of time and then execute the function.

Syntax

window.setTimeout("function", milliseconds);

setTimeout() Example

<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>setTimeout</title>
</head>
<body>
	<script type="text/javascript">
		function myFunction() {
			setTimeout("myInterval()",3000)
		}
		function myInterval(){
			alert("Welcome to JavaBeat!!!");
		}
	</script>
	<form>
		<input type="button" value="Click" onclick="myFunction();">
	</form>
</body>
</html>
  • <script type=”text/javascript”> tag is used to define client side script which uses attribute type for specifying MIME type.
  • setTimeout(“myInterval()”,3000) line indicates that it will wait for specific amount of time and execute the function.
  • alert(“Welcome to JavaBeat!!!”); line displays alert message after specified interval.
  • <input type=”button” value=”Click” onclick=”myFunction();”> tag uses type attribute which defines clickable button, value attribute creates click button and onclick() event occurs when user clicks on the element .

Timers in JavaScript – setTimeOut Demo

  • Save the file as JSsetTimeout_example.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

When the execution process is completed successfully we will get the following output:

Timers in JavaScript - setTimeOut Demo

To stop the execution in setTimeout() method, we use the clearTimeout() method. This method should be specified in the setTimeout() method. To use clearTimeout() method ,we must use global variable when creating the time out method.

clearTimeout Syntax

window.clearTimeout(timeout Variable);

clearTimeout Example

<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>clearTimeout</title>
</head>
<body>
	<script type="text/javascript">
		var x;
		function myFunction() {
			x = setTimeout("myFunction()", 3000);
			alert("Welcome to JavaBeat!!!");
		}
		function clearFunc() {
			clearTimeout(x);
		}
	</script>
	<form>
		<input type="button" value="Click" onclick="myFunction();">
<input type="button" value="Stop" onclick="clearFunc();">
	</form>
</body>
</html>

  • <script type=”text/javascript”> tag is used to define client side script which uses attribute type for specifying MIME type.
  • x = setTimeout(“myFunction()”, 3000); line indicates that it will wait for specific amount of time and execute the function.
  • alert(“Welcome to JavaBeat!!!”); line displays alert message as specified.
  • clearTimeout(x); line determines that x is the variable of timeout as returned from the setTimeout() method.
  • <input type=”button” value=”Click” onclick=”myFunction();”> tag uses type attribute which defines clickable button, value attribute creates click button and onclick() event occurs when user clicks on the element .

Timers in JavaScript – clearTimeOut Demo

  • Save the file as JSclearTimeout_example.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

When the execution process is completed successfully we will get the following output:

Timers in JavaScript - clearTimeOut Demo

Category: JavaScriptTag: JavaScript Tutorials

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Alert Messages in Javascript
Next Post: Custom Objects in JavaScript »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

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

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact