search

Home >Web Front-end >JS Tutorial >Examples of use of setInterval and setTimeout in js

Examples of use of setInterval and setTimeout in js

高洛峰
高洛峰Original
2017-02-08 16:10:151007browse

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>

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>

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Issues you need to pay attention to when using the closure feature of Javascript's setTimeout()Next article：Issues you need to pay attention to when using the closure feature of Javascript's setTimeout()

Related articles

See more