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

The window object permits execution of code at determined time intervals.

These time interims are called timing events.

The two key techniques to use with JavaScript are:

  • setTimeout(function, milliseconds)
    Executes a capacity, in the wake of holding up a predefined number of milliseconds.
  • setInterval(function, milliseconds)
    Same as setTimeout(), yet rehashes the execution of the capacity continuously.

The setTimeout() Method

window.setTimeout(function, milliseconds);

The window.setTimeout() strategy can be composed without the window prefix.

The first parameter is a capacity to be executed.

The second parameter demonstrates the quantity of milliseconds before execution.

Example

Click a catch. Hold up 3 seconds, and the page will alarm "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() technique stops the execution of the capacity determined in setTimeout().

window.clearTimeout(timeoutVariable)

The window.clearTimeout() strategy can be composed without the window prefix.

The clearTimeout() strategy utilizes the variable come back from setTimeout():

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

If the capacity has not as of now been executed, you can stop the execution by calling the clearTimeout() method:

Example

Same model as above, yet with an additional "Stop" button:

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

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

The setInterval() Method

The setInterval() strategy rehashes a given capacity at each given time-interval.

window.setInterval(function, milliseconds);

The window.setInterval() technique can be composed without the window prefix.

The first parameter is the capacity to be executed.

The second parameter demonstrates the length of the time-interim between each execution.

This precedent executes a capacity called "myTimer" when consistently (like an advanced watch).

Example

Display the current time:

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() strategy stops the executions of the capacity determined in the setInterval() method.

window.clearInterval(timerVariable)

The window.clearInterval() strategy can be composed without the window prefix.

The clearInterval() strategy utilizes the variable came back from setInterval():

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);
work myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
Try it yourself »