JavaScript timing events

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() - Execute the specified code continuously for the specified number of milliseconds.

setTimeout() - Execute the specified code after pausing for the specified number of milliseconds

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

setInterval() method

setInterval() executes the specified code continuously for the specified number of milliseconds

Syntax

window.setInterval("javascript function",milliseconds);

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

setInterval() The first parameter is the function.

The number of milliseconds between the second parameter

Note: 1000 milliseconds is one second.

"hello" pops up every three seconds:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setInterval(function(){alert("Hello")},3000);
}
</script>
</body>
</html>

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

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

Then you can use the clearInterval() method to stop execution.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
var t = self.setInterval("clock()",50)
function clock()
{
var time=new Date()
document.getElementById("clock_show").innerHTML=time
}
</script>
</head>
<body>
  <p id="clock_show"></p>
  <button onclick="window.clearInterval(t)">停止计时</button>
</body>
</html>

setTimeout() method

Syntax

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

The setTimeout() method will return a certain value. In the above statement, the value is stored in a variable named t. If you wish to cancel this setTimeout(), you can specify it using this variable name.

The first parameter of setTimeout() is a string containing JavaScript statements. 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 time the first parameter will be executed.

Tip: 1000 milliseconds is equal to one second.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>

How to stop execution?

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

Syntax

window.clearTimeout(timeoutVariable)

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

To use the clearTimeout() method, you must. Use global variables in creating a timeout method (setTimeout):

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

If the function has not been executed yet, you can use the clearTimeout() method. Stop executing function code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
    var s = 0;
    var n = 0;
    var t;
    function timeCount()
    {
    document.getElementById('second_show').value = s;
    n = n+1;
    s = n/10;
    t = setTimeout("timeCount()",100);
    }
</script>
</head>
<body>
  <form>
    <input type="button" value="开始计时" onClick="timeCount()">
    <input type="text" id="second_show">
    <input type="button" value="结束计时" onClick="clearTimeout(t)">
  </form>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> var s = 0; var n = 0; var t; function timeCount() { document.getElementById('second_show').value = s; n = n+1; s = n/10; t = setTimeout("timeCount()",100); } </script> </head> <body> <form> <input type="button" value="开始计时" onClick="timeCount()"> <input type="text" id="second_show"> <input type="button" value="结束计时" onClick="clearTimeout(t)"> </form> </body> </html>

submit Reset Code

Automatic operation

JavaScript timing events

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]