计时器

计时器,我们通常都会用计时器来执行一些操作,比如间隔多少时间之后执行代码和延长多少时间之后来执行代码等等。那么,计时器又分为两种,一种叫间隔性触发计时器,另一种叫一次性计时器(延时计时器)。

间隔性触发计时器:setInterval() 每隔指定时间执行代码

             clearInterval()  取消setInterval的设置(可以理解为删除计时器)

一次性计时器 :setTimeout() 指定延迟的时间之后来执行一次代码

             clearTimeout()   取消setTimeout的设置

间隔性计时器和一次性计时器的差别就是间隔计时器时是指每隔指定的时间就触发一次,而一次性计时器则是延迟指定时间后只执行一次触发。

接下来使用两种计时器来实现数字累加。

在这里页面布局使用的是bootstrap4框架搭建。

计时器
计时器
完成布局之后开始书写js代码,首先先实现间隔性计时器的数字累加。
计时器

代码书写完成之后转到页面上查看效果。
计时器

当点击开始计时的时候,很显然数字以每间隔200毫秒就触发一次的速度进行累加。因为刚刚书写js的时候我们也书写了清除间隔计时器的代码,所以当点击停止计时的时候,数字将不再进行累加。

接下来将使用一次性计时器来实现数字累加。
计时器
转到页面查看效果
计时器

很明显,当点击开始计时的时候延时了200毫秒才进行数字累加(仅一次累加)。

顾名思义,一次性计时器只执行一次的触发(可延时),不同于间隔计时器的间接触发,这便是两个计时器的差别,这也方便了我们在不同场景针对计时器有了不同的选择。