JavaScript计时器

JavaScript计时器

开发工具与关键技术：前端

作者：盘子

撰写时间：2019年4月6日

JavaScript 是脚本语言，是一种轻量级的编程语言，是可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。在JavaScript中的计时器类型：1、一次性计时器，是指仅在指定的延迟时间之后触发一次。2、间隔性触发计时器：只每隔一定的时间间隔就触发一次。通过使用JavaScript，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。使用计时器有两个重要的方法：setInterval() 方法和setTimeout() 方法。

setInterval() 方法按指定的周期（以毫秒计）来调用函数或计算表达式。

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

下面用个小例子说明setInterval() 方法和setTimeout() 方法这两种方法的使用，看源代码截图如下：

如图中，代码也较简单，在setInterval() 方法中放入一个setTimeout() 方法。当点击所设置的按钮时，两个方法效果出现前后不同。setInterval() 方法和setTimeout() 方法是 HTML DOM Window对象的两个方法。

setInterval() 方法的第一个参数是函数（function），第二个参数间隔的是毫秒数。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：clearInterval(id_of_setInterval)

clearInterval() 方法的参数必须是由setInterval()返回的ID值。

setTimeout() 方法的第一个参数是含有JavaScript语句的字符串，第二个参数指示从当前起多少毫秒后执行第一个参数。setTimeout()和clearTimeout()一起使用，停止计时器。

语法:clearTimeout(id_of_setTimeout)

setInterval() 方法和setTimeout() 方法都是以毫秒为单位，1000ms=1s 。

下面是setInterval()
方法和setTimeout() 方法两种方法的实现效果，见截图如下：

如效果图所示，从左到右效果实现的过程。当你点击所设置的按钮，两秒后会弹出提示框，输出“是要显示当前时间？”的字样，点击确定按钮提示框消失，按钮上方显示当前时间。这并不单单是显示当前的一个不动的时间点，而是一个不停地跑动的时钟。