JavaScript Timing Events

JavaScript Timing Events

By using JavaScript, we have the ability to execute code after a set interval of time, not immediately after the function is called. We call this a timing event.

It is easy to use timing events in JAVASCRITP, and two key methods are:

• SetInterval ()-interval specifies the number of milliseconds to execute the specified code continuously.
• SetTimeout ()-executes the specified code after pausing the specified number of milliseconds

Note: setinterval () and SetTimeout () are the two methods of the HTML DOM window object.

SetInterval () method

SetInterval () interval specifies the number of milliseconds to execute the specified code repeatedly

Syntax Window.setinterval (" JavaScript function", milliseconds);

The Window.setinterval () method can use the function setinterval ()directly 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.

Instance

"Hello" pops up every three seconds:

SetInterval (function () {alert ("Hello")},3000);
Try it»

The example shows how to use the SetInterval () method, but a pop-up once every three seconds is not good for the user experience.

The following instance displays the current time. The SetInterval () method sets the code to execute once per second, which is the same as the watch.

Instance

Show Current Time

var myvar=setinterval (function () {MyTimer ()},1000);

function MyTimer ()
{
var d=new Date ();
var t=d.tolocaletimestring ();
document.getElementById ("Demo"). Innerhtml=t;
}
Try it»
How do I stop execution?

The Clearinterval () method is used to stop the function code executed by the SetInterval () method.

Grammar Window.clearinterval ( intervalvariable)

The Window.clearinterval () method can use the function clearinterval ()directly without using the window prefix.

To use the Clearinterval () method, you must use a global variable when you create the timing method:

Myvar=setinterval (" JavaScript function", milliseconds);

You can then use the Clearinterval () method to stop execution.

Instance

In the following example, we added the Stop time button:

<p id= "Demo" ></p>
<button onclick= "mystopfunction ()" >stop time</button>

<script>
var myvar=setinterval (function () {MyTimer ()},1000);
function MyTimer ()
{
var d=new Date ();
var t=d.tolocaletimestring ();
document.getElementById ("Demo"). Innerhtml=t;
}
function Mystopfunction ()
{
Clearinterval (MyVar);
}
</script>
Try it»
SetTimeout () method syntax Window.settimeout (" JavaScript functions", Number of milliseconds);

The SetTimeout () method returns a value. In the above statement, the value is stored in a variable named T. If you want to cancel the setTimeout (), you can use the variable name to specify it.

The first argument to SetTimeout () is a string containing a JavaScript statement. This statement may be such as "alert (' 5 seconds! ')" or a call to a function, such as alertmsg () ".

The second parameter indicates how many milliseconds from the current start to execute the first parameter.

Tip: 1000 milliseconds equals one second.

Instance

Wait 3 seconds, then pop up "Hello":

SetTimeout (function () {alert ("Hello")},3000);
Try it»
How do I stop execution?

The Cleartimeout () method is used to stop executing the function code of the SetTimeout () method.

Grammar Window.cleartimeout ( timeoutvariable)

The window.cleartimeout () method can not use the window prefix.

To use the Cleartimeout () method, you must use a global variable in the Create Timeout method (SetTimeout):

Myvar=settimeout (" JavaScript function", milliseconds);

If the function has not yet been executed, you can use the Cleartimeout () method to stop executing the function code.

Instance

The following is the same instance, but the "Stop the Alert" button is added:

var MyVar;

function MyFunction ()
{
Myvar=settimeout (function () {alert ("Hello")},3000);
}

function Mystopfunction ()
{
Cleartimeout (MyVar);
}
Try it»
More examples

Another simple timing

JavaScript Timing Events