setTimeout和setInterval
setTimeout和setInterval
tandaxia
发布于 2018-09-27 04:31:58
发布于 2018-09-27 04:31:58
代码可运行
运行总次数：0
代码可运行
setTimeout(methodName, interval); //间隔时间单位为毫秒，表示interval毫秒后执行方法methodName
setInterval(methodName, interval); //间隔时间单位为毫秒，表示每隔interval毫秒执行后都会执行一次方法methodName
执行的方法可以带参数，但是参数只能是字符串、数字类的，不能是对象
实例代码：
1 <html>
2 <head>
3 <title>标题</title>
4 <meta charset="utf8"/>
5 <script type="text/javascript">
6 //测试setTimeout
7 var runTimeout, runInteval;
8 function TestTimeout(idName){
9 if (!idName) idName = "showInfo";
10
11 document.getElementById(idName).innerText = (new Date()) + ", runTimeout = " + runTimeout;
12 runTimeout = setTimeout("TestTimeout('showInfo')", 1000); //一秒后执行
13 //或者写作：runTimeout = setTimeout(TestTimeout, 1000); //一秒后执行
14 }
15
16 function TestClearTimeout(){
17 clearTimeout(runTimeout);
18 runTimeout = null;
19 document.getElementById("showInfo").innerText = "setTimeout()停止了, runTimeout = " + runTimeout;
20 }
21
22 //测试setInterval
23 function ChangeTime(idName){
24 document.getElementById(idName).innerText = (new Date()) + ", runInteval = " + runInteval + ", runTimeout = " + runTimeout;
25 }
26
27 function TestInterval(){
28 if (runInteval){
29 return;
30 }
31 runInteval = setInterval("ChangeTime('showInfo2')", 1000); //每过一秒就调用ChangeTime()方法
32 //或者写作：runInteval = setInterval(ChangeTime, 1000);//需要带参数的话就用上面那种写法
33 }
34 //停止setInterval
35 function TestClearInterval(){
36 clearInterval(runInteval);
37 runInteval = null;
38 document.getElementById("showInfo2").innerText = "setInterval()停止了, runInteval = " + runInteval;
39 }
40
41
42 </script>
43 </head>
44 <body>
45 <h3 id="showInfo"></h3>
46 <h3 id="showInfo2"></h3>
47 <input type="button" value="测试timeout" onclick="TestTimeout()"/>
48 <input type="button" value="停止timeout" onclick="TestClearTimeout()"/>
49 <input type="button" value="测试interval" onclick="TestInterval()"/>
50 <input type="button" value="停止interval" onclick="TestClearInterval()" />
51 </body>
52 </html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2015-05-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
