WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

JavaScript Timing Events


1
2
3
4
5
6
7
8
9
10
11
12

JavaScript can be executed in time-intervals.

This is called timing events.


Timing Events

With JavaScript, we have the ability to execute code after a set time interval, rather than immediately after the function is called. We call this a timed event.

It is easy to use timed events in JavaScritp. Two key methods are:

  • setInterval ()-keeps executing the specified code at the specified number of milliseconds.
  • setTimeout ()-executes the specified code after the specified number of milliseconds.

Note: setInterval () and setTimeout () are two methods of the HTML DOM Window object.



The setTimeout() Method

myVar= window.setTimeout("javascript function", milliseconds);

setTimeout () method returns a value. In the above statement, the value is stored in a variable named myVar. If you wish to cancel this setTimeout (), you can use this variable name to specify it.

The first parameter of setTimeout () is a string containing a JavaScript statement. This statement might be something like "alert ('5 seconds!')", Or a call to a function like alertMsg.

The second parameter indicates how many milliseconds after the first parameter is executed.

Tip: 1000 milliseconds equal one second.

Example

Wait 3 seconds and then pop up "Hello":

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

<script>
function myFunction() {
    alert('Hello');
}
</script>
Try it yourself »

How to Stop the Execution?

The clearTimeout () method is used to stop execution of the function code of the setTimeout () method.

window.clearTimeout(timeoutVariable)

window.clearTimeout () method can be used without the window prefix.

To use the clearTimeout () method, you must use global variables in the set timeout method (setTimeout):

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

If the function has not yet been executed, you can use the clearTimeout () method to stop execution of the function code.

Example

Here is the same example, but with the "Stop the alert" button:

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

<button onclick="clearTimeout(myVar)">Stop it</button>
Try it yourself »

The setInterval() Method

setInterval () keeps executing the specified code at the specified number of milliseconds.

window.setInterval(function, milliseconds);

window.setInterval () method can use the function setInterval () without using the window prefix.

setInterval () The first parameter is a function.

The number of milliseconds for the second parameter interval

Note: 1000 milliseconds is one second.

Example

The example shows how to use the setInterval () method, but popping up every three seconds is not good for the user experience. The following example shows the current time. The setInterval () method sets the code to execute every second, just like a watch.
var myVar = setInterval(myTimer, 1000);

function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Try it yourself »

How to Stop the Execution?

The clearInterval () method is used to stop function code execution of the setInterval () method.

window.clearInterval(timerVariable)

The window.clearInterval () method can use the function clearInterval () without the window prefix. To use the clearInterval () method, you must use global variables when creating the timing method:

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

Example

Same precedent as above, however we have included a "Stop time" button:

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
Try it yourself »