<JavaScript> 七. 延时器

最新推荐文章于 2025-08-12 22:36:33 发布

weixin_30339969

最新推荐文章于 2025-08-12 22:36:33 发布

阅读量72

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ZeroHour/p/6366507.html

本文详细介绍了JavaScript中的setTimeout方法及其使用技巧。通过一个计数器示例展示了如何利用定时器实现周期性的任务执行，并演示了如何通过clearTimeout来停止定时器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 <script type="text/javascript">
 6 /*
 7     延时器 时间一到, 执行JS代码一次
 8 */
 9 
10 // ------------------ 方法 --------------------
11 /*
12     1. setTimeout(code, millisec)
13     code: JS代码, 一般是JS函数
14     millisec: 毫秒
15     返回一个延时器id变量
16 
17         (1). 以下两种写法是正确的, 都是传函数地址
18     window.setTimeout(init, 2000);
19     window.setTimeout("init()", 2000);
20 
21         (2). 这种写法是错误的, 传函数的执行结果
22     window.setTimeout(init(), 2000);
23 */
24 
25 // 实例1: 计数器
26 var i = 0;
27 var timeout;
28 
29 // 延时器开始
30 function startTimeout() {
31 
32     // 获取<input>元素
33     var inputObj = document.getElementById("result");
34 
35     // 更改信息
36     inputObj.value = "程序已经运行了" + i + "秒!"
37 
38     // 更改计数
39     i++;
40 
41     // 调用自己
42     timeout = window.setTimeout("startTimeout()", 1000);
43 }
44 
45 /*
46     2. clearTimeout(timer) 清除延时器id变量
47     window.clearTimeout(timer);
48 */
49 
50 // 延时器结束
51 function stopTimeout() {
52 
53     // 信息更新信息
54     window.clearTimeout(timeout);
55 }
56 
57 </script>
58 </head>
59 <body>
60 
61 <!-- 延时器 -->
62 <input id="result" type="button" value="程序已经运行了0秒!" /><br />
63 <input type="button" value="开始" onclick="startTimeout()">
64 <input type="button" value="停止延时器" onclick="stopTimeout()"><br />
65 
66 </body>
67 </html>