Examples of use of setInterval and setTimeout in js-JS Tutorial-php.cn

Examples of use of setInterval and setTimeout in js

高洛峰

Release： 2017-02-08 16:10:15

Original

949 people have browsed it

setInterval() Definition and Usage

The setInterval() method executes a function or expression at a specified period (in milliseconds). This method will continue to call the function in a loop until the function is explicitly stopped using clearInterval() or the window is closed. The parameter of the clearInterval() function is the ID value returned by setInterval().

Syntax

setInterval(code,millisec[,"lang"])
code required. A function to be called or a string of code to be executed.
millisec is a must. The time interval, in milliseconds, between periodic executions or calls to code.

Return value

A value that can be passed to Window.clearInterval() to cancel the periodic execution of code.

Usage example:

Copy code The code is as follows:

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=setInterval("clock()",50);
function clock(){
 var t=new Date();
 document.getElementById("clock").value=t;
}
</script>
</form>
<button onclick="window.clearInterval(int)">
停止 interval 事件</button>
</body>
</html>

Copy after login

setTimeout() Definition and Usage

The setTimeout() method is used to call a function or calculate an expression after a specified number of milliseconds. This method is different from the setInterval() method. Only executed once.

Syntax

setTimeout(code,millisec)
code required. The string of JavaScript code to be executed after the function to be called.
millisec Required. The number of milliseconds to wait before executing the code, in milliseconds.

Tips:
(1) Although setTimeout() only executes the code once. But if you need to call it multiple times, in addition to using setInterval(), you can also let the executed code itself call the setTimeout() method again to achieve the purpose of multiple executions.
(2) In addition, the setTimeout() method can also return an ID value to facilitate the use of the clearInterval() method to cancel the use of the setTimeout() method.

Usage example:

Copy code The code is as follows:

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript">
function timedMsg(){
 var t=setTimeout("alert(&#39;3 秒时间到!&#39;)",3000);
}
function timedMsgAways(){
 alert(&#39;3 秒时间到!&#39;);
 var t=setTimeout("timedMsgAways()",3000);
}
</script>
</head>
<body>
<form>
<input type="button" value="3 秒后警告" onClick="timedMsg()"><br />
<input type="button" value="循环 3 秒警告" onClick="timedMsgAways()">
</form>
</body>
</html>

Copy after login

For these two methods, it should be noted that if it is required to perform an action accurately after every fixed time interval, then it is best to use setInterval, and if you do not want to cause mutual interference due to continuous calls, especially every This function call requires heavy calculations and long processing time, so it is best to use setTimeout.

For more articles related to setInterval and setTimeout usage examples in js, please pay attention to the PHP Chinese website!