JS——计数器介绍及setinterval（）案例

计数器方法：setInterval()、setTimeout()方法 及 clearInterval()、clearTimeout()方法

简单介绍：

（1）setInterval()和clearInterval()：

setInterval()：周期性地调用一个函数(function)或者执行一段代码。

clearInterval()：取消掉用setInterval设置的重复执行动作。

（2）setTimeout()和clearTimeout()：

setTimeout()：在指定的延迟时间之后调用一个函数或者执行一个代码片段。
clearTimeout()：方法可取消由 setTimeout() 方法设置的 timeout。

详细介绍见链接：https://segmentfault.com/a/1190000002475127

 

下面显示简单的setInterval()方法的案例：

显示效果如下图所示：

详细代码如下图：

代码讲解：

第20-22行代码：获取元素div及input、设置变量clearTime为null（用于存放后面的计数器方法）。

第25行代码：把setInterval计数器存入变量clearTime中；当点击第一个按钮，启动计数器方法，让div不停地执行向右移动的运动。

 第30行代码：当点击第二个按钮，执行clearInterval()方法，清除存入到变量clearTime中的setInterval计数器方法，让div暂停向右的运动。

 

检测clearTime变量的值：（第31行代码）

clearTime输出为：第25行代码setInterval的计数器方法进行的次数； 　　因为clearTime变量是在外部定义的，所以在31行代码函数内部访问的到clearTime的内容

转载于:https://www.cnblogs.com/ytraister/p/10894900.html