JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Timing Functions

00:00:00

A timing function is a function that enables us to execute a function at a particular time.

Using timing function you can delay the execution of code so that it does not get done at the exact moment an event is triggered.

There are two timing functions in JavaScript:

Both setTimeout() and setInterval() are methods of the window object and can be written without the window prefix.


The setTimeout() Method

The setTimeout() method is used to execute a function or specified piece of code just once after a certain period of time.

Syntax:
window.setTimeout(function, milliseconds)

The first parameter is a function to be executed.

The second parameter indicates the number of milliseconds (1 second = 1000 milliseconds) before execution.

The following example will display an alert message after 2 seconds on click of the button:

Run code

Stopping Code Execution

The clearTimeout() method stops the execution of the function specified in setTimeout().

Syntax:
window.clearTimeout(var)

The clearTimeout() method uses the variable returned from setTimeout().

t = setTimeout(function, milliseconds);
clearTimeout(t);

If the function has not already been executed, you can stop the execution by calling the clearTimeout() method.

Same example as above, but with an added "Stop" button:

Run code

The setInterval() Method

The setInterval() method repeatedly calls a function, with a fixed time delay between each call.

Syntax:
window.setInterval(function, milliseconds)

The first parameter is the function to be executed.

The second parameter indicates the length of the time-interval between each execution.

This example executes a function called "startTimer" once every second (like a digital watch):

Run code

Stopping Code Execution

The clearInterval() method stops the executions of the function specified in the setInterval().

Syntax:
window.clearInterval(var)

The clearInterval() method uses the variable returned from setInterval().

t = setInterval(function, milliseconds);
clearInterval(t);

Same example as above, but with an added "Stop" button:

Run code

More Examples

Click on the "Start count" button below to start the timer. Click on the "Stop count" button to stop the counting:

0
Run code

Click on the "Start Progress" button below to start progressbar. Click on the "Stop Progress" button to stop the progressbar:


Run code