26. 定时器

目录

1 只执行一次函数定时器 setTimeout()

2  五秒后关闭广告

3  停止setTimeout()定时器 clearTimeout()

4  循环执行函数定时器 setInterval()

5  倒计时效果

6  停止setInterval()定时器 clearInterval()

7  定时器的启停

8  发送短信案例

---

1 只执行一次函数定时器 setTimeout()

语法是这样的，第二个参数可以省略，省略默认为0

window可以省略

打开页面后什么也没有出现

5s之后执行函数，自动执行，不需要进行其他操作

每一次刷新后会重置时间

写函数名效果一样

也可以这样写，效果也一样，一般我们不这样写

一个页面中可能会有很多的定时器，一般我们会把定时器放到一个变量中

定时器中使用的函数也被称为回调函数，我们之前注册时间使用的函数也可以被称作回调函数

2  五秒后关闭广告

广告内容我们直接用div替代了

打开后有一个盒子

五秒之后盒子消失

3  停止setTimeout()定时器 clearTimeout()

语法是这样的

我们现在随便按一个键，按键之后让广告不消失

这里注意一定将clearTimeout()套在function中，不要直接使用

打开页面后有这个广告

在消失之前我们随便按一个键，按下后发现广告一直存在

4  循环执行函数定时器 setInterval()

语法是这样的，使用方式与setTimeout()相似

毫秒数可省略，如果省略毫秒数就为0

这样每过一秒就会执行一遍回调函数

5  倒计时效果

这里注意在使用setInterval()前需要首先执行一遍回调函数，这样就没有一开始晚一秒出现的效果了

每隔一秒页面会自动刷新

有时会出现两秒两秒跳的情况，有时精度没有这么高，没法避免

如果要指定某年某月，那么修改target_time就可以了

6  停止setInterval()定时器 clearInterval()

语法是这样的

当我们按下按键的时候计时器就会停止

7  定时器的启停

如果使用setTimeout()停了之后是不能再启动的，如果使用setInterval()停了之后只需要再执行一遍setInterval()就可以再启动定时器

这里注意开始按钮中定义timer要定义为全局变量

点击开始定时器按钮会开始循环执行回调函数，点击关闭定时器按钮会停止循环执行回调函数

8  发送短信案例

打开页面后是这样的

点击发送后会让按钮处于不可用状态5s，并显示还有几秒恢复为可用状态

5s后恢复可用状态，再次点击依然重复上面的功能

代码是是这样的