企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# 1、介绍和语法 定时器可以完成定时作用,可以让一段代码延迟一段时间然后再执行。 很多地方都会用到定时器,比如用JS写一个会走的钟表;比如轮播图; JS定时器有两种: * 指定一段时间,然后在该时间段之后只执行一次代码,特点是只执行一次。 * 指定一段时间,然后每隔一段时间执行一次代码,也就是间隔一段时间执行一次,一直重复。 具体方法如下: setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 语法: ``` setTimeout(JS代码或函数, 毫秒数); setInterval (JS代码或函数, 毫秒数); ``` ![](https://img.kancloud.cn/72/fa/72fa78767eb9251080a9a52398d8b895_777x556.png) setInterval() 语法上和setTimeout一样。 # 2、会走的时间 思路是写一个能够输出当前时间的函数,页面加载完毕马上执行一次,然后在用定时器每隔1秒执行一次函数即可。 HTML代码: ![](https://img.kancloud.cn/63/e3/63e3dd769d13183a77edaa24e2f32226_288x25.png) 下面是检测数字是否小于10的函数: ![](https://img.kancloud.cn/c2/0b/c20baa24ae1aa2d9aa03dc56bffa4e88_698x161.png) 下面定义制作时间的函数,然后马上调用一次,这样刷新页面就能够看到时间了: ![](https://img.kancloud.cn/1f/32/1f32fc09bbb1e478cb8607551b2eb541_778x352.png) 使用定时器,让制作时间的函数每隔一秒执行一次: ![](https://img.kancloud.cn/c9/c8/c9c8dfd87b376bc1bc0a2ae84962a6d7_494x27.png) # 3、终止定时器 对应的终止定时器的方法分别是: ``` clearInterval(定时器计数); clearTimeout(定时器计数); ``` 参数“定时器计数”指的是定时器的返回值。 ![](https://img.kancloud.cn/d6/6f/d66fc37d9300ca07011bea9f80bb6e11_667x308.png) # 4、修改会走的时间 加入两个按钮,一个表示停止,一个表示继续。 HTML加入两个按钮: ![](https://img.kancloud.cn/af/44/af448f5f3879844a160d9cdd1b169ccb_548x80.png) JS代码给“停止”和“继续”绑定单击事件: ![](https://img.kancloud.cn/36/83/3683707560126099a9b9416196b37649_699x472.png) 优化上述代码: 首先将按钮换成一个: ![](https://img.kancloud.cn/09/de/09ded9e22b26da9bbdf2becd19b96703_574x62.png) JS代码: ![](https://img.kancloud.cn/55/e2/55e2c50ae3198fec82648337e5000a40_732x420.png)