JS浏览器对象：★计时器（setInterval()|clearInterval()|setTimeout()|clearTimeout())

JavaScript 计时器

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

计时器类型：

一次性计时器：仅在指定的延迟时间之后触发一次。

间隔性触发计时器：每隔一定的时间间隔就触发一次。

计时器方法：

一、计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

【语法】：

setInterwal(代码,交互时间);

【参数说明】：
1：代码：要调用的函数或要执行的代码串。
2：交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

【返回值】：
一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用函数格式（假设有一个clock()函数）：

setInterval("clock()",1000)
或
setInterval(clock,1000)

【案例】设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:

二、取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

【语法】：

clearInterval(id_of_setInterval)

【参数说明】：
id_of_setInterval：由 setInterval() 返回的 ID 值。

【案例】每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:

停止时间.gif

三、计时器setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

【语法】

setTimeout(代码,延迟时间);

【参数说明】：

1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

【案例】当我们打开网页3秒后，再弹出一个提示框，

3秒后弹出.gif

代码如下:

【案例】当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。

点击按钮，5秒后弹出.gif

【案例】创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。

无穷循环中的计数器.gif

四、取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止计时器。

【语法】：

clearTimeout(id_of_setTimeout)

【参数说明】：
id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

【案例】此例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 "Stop" 按钮来停止这个计数器：

停止计时器.gif

【备注】：若是，即开始。

end.
本笔记整理自慕课网