JavaScript|JavaScript 定时器详情
目录
- 1、简单介绍
- 2、setInterval
- 2.1 描述
- 2.2 参数
- 2.3 返回值
- 2.4 用法
- 3、setTimeout
- 3.1 描述
- 3.2 参数
- 3.3 用法
- 4、取消timer
- 5、在控制台使用定时器
1、简单介绍 在
JavaScript
中定时器有两个 setInterval()
与 setTimeout()
分别还有取消定时器的方法。这都是
window
的对象,调用时可以省略window
。这两个方法并不在 JavaScript
的规范中。定时器方法相关方法有四种:
方法 | 描述 |
---|---|
setInterval | 周期性地调用一个函数(function)或者执行一段代码。 |
clearInterval | 取消掉用setInterval设置的重复执行动作。 |
setTimeout | 在指定的延迟时间之后调用一个函数或者执行一个代码片段。 |
clearTimeout | 方法可取消由 setTimeout() 方法设置的 timeout。 |
注意:setTimeout() 只执行一次setInterval()是每间隔给定的时间周期性执行。
2、setInterval
2.1 描述
setInterval()
方法可以按照制定的周期,来重复调用一个函数或执行一个代码段。周期单位为毫秒。setInterval()
方法如果没有被 clearInterval()
方法关闭或页面关闭,那么会一直调用下去。setInterval的参数有多个。
第一种,如果第一个参数为代码段,那么setInterval()方法可以选填。
第二种,如果第一个参数为函数,那么setInterval()方法可以有多个参数。
let timerId = setInterval(func|code, delay, arg1, arg2, ...)
2.2 参数
参数 | 必/选填 | 描述 |
---|---|---|
func | code | 必填 | 调用的函数后要执行的函数或代码字符串 |
delay | 必填 | 执行代码前所需的时间,单位为毫秒,可以不填,默认值是 0 |
arg1,arg2… | 选填 | 要传入被执行函数(或代码字符串)的参数列表(IE9 以下不支持) |
注意:参数func|code 一般传入的都是函数。由于某些历史原因,支持传入代码字符串,但是不建议这样做。
2.3 返回值
返回值
timeoutID
是一个正整数,表示定时器的编号。这个值可以传递给clearTimeout()
来取消该定时器。【JavaScript|JavaScript 定时器详情】
2.4 用法
这是一个点击按钮,每隔一秒种,数字加一的示例;
3、setTimeout
3.1 描述
setTimeout()
返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。setTimeout()
允许我们将函数推迟到一段时间间隔之后再执行。let timerId = setTimeout(func|code, delay, arg1, arg2, ...)
3.2 参数
setTimeout()
参数这里和setInterval()
的参数是一样的。参数 | 必/选填 | 描述 |
---|---|---|
func | code | 必填 | 调用的函数后要执行的函数或代码字符串 |
delay | 必填 | 执行代码前所需的时间,单位为毫秒,可以不填,默认值是 0 |
arg1,arg2… | 选填 | 要传入被执行函数(或代码字符串)的参数列表(IE9 以下不支持) |
注意:参数func|code 一般传入的都是函数。由于某些历史原因,支持传入代码字符串,但是不建议这样做。
3.3 用法
setTimeout()
用法和 setInterval()
是一样的,不过
setTimeout()
只执行一次不同,setInterval()
是根据指定的时间周期性执行。4、取消timer
clearInterval()
方法可取消由 setInterval()
设置的 timer
。clearTimeout()
方法可取消由 setTimeout()
设置的 timer
。使用方法很简单,只有一个参数,该参数
timeoutID
为您要取消定时器的标识符。该ID由相应的
setTimeout()
或clearTimeout()
调用返回.clearInterval(intervalID); clearTimeout(timeoutID);
注意:注意的是setTimeout()和setInterval()共用一个编号池,技术上,clearTimeout()和 clearInterval() 可以互换。但是,为了避免混淆,不要混用取消定时函数。用法很简单:
function timer() {timerId = setTimeout(addNum, 1000); }clearTimeout(timerId); // 当代码运行到这行的时候,会取消timer所设置的定时器。
5、在控制台使用定时器 在浏览器控制台中也可以使用定时器
console.time(timerName)
创建一个名为name的计时器,并开始计时。
注意: 每一个计时器必须拥有唯一的名字,页面中最多能同时运行10,000个计时器。console.timeEnd(timerName)
调用
console.timeEnd(name
)停止计时器并输出所耗时间(毫秒)。console.time(timerName); console.timeEnd(timerName);
5.1 用法
for循环99999次要多少时间示例:
console.time(name); let num; for (let index = 0; index < 99999; index++) {num++; }console.timeEnd(name);
到此这篇关于JavaScript 定时器 详情的文章就介绍到这了,更多相关JavaScript 定时器 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 事件代理
- 数组常用方法一
- 芯灵思SinlinxA33开发板Linux内核定时器编程
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- 【读书笔记】JavaScript|【读书笔记】JavaScript DOM编程艺术 (第2版)
- JavaScript判断数组的方法总结与推荐