js中的setInterval和setTimeout使用实例

前端技术 2023/09/03 JavaScript

setInterval() 定义和用法

setInterval() 方法可按照指定的周期(以毫秒计)来执行函数或表达式。该方法会不停地循环调用函数,直到使用 clearInterval() 明确停止该函数或窗口被关闭。clearInterval() 函数的参数即 setInterval() 返回的 ID 值。

语法

setInterval(code,millisec[,\"lang\"])
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

使用示例:

复制代码 代码如下:

<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() 定义和用法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,该方法与 setInterval() 方法不同的是该方法只执行一次。

语法

setTimeout(code,millisec)
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数,以毫秒计。

提示:
(1)setTimeout() 虽然是只执行一次代码。但如果许要多次调用,除了使用 setInterval() 外还可以让被执行的代码里面自身再次调用 setTimeout() 方法已达到多次执行的目的。
(2)另外setTimeout()方法也同样可以返回一个ID值,以方便使用clearInterval()方法对使用setTimeout()方法的取消。

使用示例:

复制代码 代码如下:

<html>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<head>
<script type=\"text/javascript\">
function timedMsg(){
 var t=setTimeout(\"alert(\'3 秒时间到!\')\",3000);
}
function timedMsgAways(){
 alert(\'3 秒时间到!\');
 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>

本文地址:https://www.stayed.cn/item/8830

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。