Understanding and using JavaScript timing events

JavaScript timing events play an important role in the time calculation of the website. This article will give some understanding of it.

JavaScript timing events

By using 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 timing event.

It is very easy to use timing events in JavaScript. The two key methods are:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。

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

setInterval() 方法
setInterval() 间隔指定的毫秒数不停地执行指定的代码

Syntax

window.setInterval("javascript function",milliseconds);
window.setInterval() 方法可以不使用window前缀，直接使用函数setInterval()。
setInterval() 第一个参数是函数（function）。

The number of milliseconds between the second parameter

Note: 1000 milliseconds is one second.

Example

Pop up "hello" every three seconds:

setInterval(function(){alert("Hello")},3000);
实例展示了如何使用 setInterval() 方法，但是每三秒弹出一次对用户体验并不好。

The following example will display the current time. The setInterval() method sets the code to be executed every second, just like a watch.

Example

Display the current time

var myVar=setInterval(function(){myTimer()},1000); 
function myTimer(){
    var d=new Date();    var t=d.toLocaleTimeString();    document.getElementById("demo").innerHTML=t;}

How to stop execution?

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

Syntax

window.clearInterval(intervalVariable)

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 creating the timing method:

myVar=setInterval("javascript function",milliseconds);

Then you Execution can be stopped using the clearInterval() method.

Example

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

<p id="demo"></p><button onclick="myStopFunction()">停止</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>

setTimeout() method

Syntax

myVar= window.setTimeout("javascript function", milliseconds);
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg。

The two parameters indicate how many milliseconds from now the first parameter will be executed.

Tip: 1000 milliseconds equals one second.

Example

Wait for 3 seconds, and then pop up "Hello":

setTimeout(function(){alert("Hello")},3000);

How to stop execution?

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

Syntax

window.clearTimeout(timeoutVariable)

The window.clearTimeout() method does not need to use the window prefix.

To use the clearTimeout() method, you must use a global variable in the creation timeout method (setTimeout):

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

If the function has not been executed, you can use the clearTimeout() method to stop it Execute function code.

Example

The following is the same example, but the "Stop the alert" button is added:

var myVar; 
function myFunction(){
    myVar=setTimeout(function(){alert("Hello")},3000);}
 function myStopFunction(){
    clearTimeout(myVar);}

This article gives a detailed explanation of how to use timing events of js , for more learning materials, please pay attention to the php Chinese website to view.

Related recommendations:

Understanding and using the relevant knowledge of JavaScript closures

Understanding and using JavaScript Cookies

Related explanations about JavaScript form validation

The above is the detailed content of Understanding and using JavaScript timing events. For more information, please follow other related articles on the PHP Chinese website!