JavaScript 定时器详情


Posted in Javascript onNovember 11, 2021

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()来取消该定时器。

2.4 用法

这是一个点击按钮,每隔一秒种,数字加一的示例;

<p id="showNum"></p>
<button onclick="timer()">点我每秒钟数字加一</button>

<script>
  const showNum = document.getElementById("showNum");

  let timerId; // 计时器的ID
  let num = 0;

  function timer() {
    timerId = setInterval(addNum, 1000);
  }

  function addNum() {
    showNum.innerText = `${num++}`;
  }

  // 没有写停止计时器代码
</script>

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() 是根据指定的时间周期性执行。

<p id="showNum"></p>
<button onclick="timer()">点击后,等待一秒钟数字加一</button>

<script>
  const showNum = document.getElementById("showNum");

  let timerId;
  let num = 0;
  addNum();

  function timer() {
    timerId = setTimeout(addNum, 1000);
  }

  function addNum() {
    showNum.innerText = `${num++}`;
  }

</script>

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 定时器 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
javascript instanceof,typeof的区别
Mar 24 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
常用DOM整理
Jun 16 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
10分钟学会js处理json的常用方法
Dec 06 Javascript
使用javascript解析二维码的三种方式
Nov 11 #Javascript
实现一个简单得数据响应系统
Nov 11 #Javascript
JavaScript函数柯里化
Nov 07 #Javascript
JS数组去重详情
Nov 07 #Javascript
手写实现JS中的new
Nov 07 #Javascript
用JS写一个发布订阅模式
Nov 07 #Javascript
浅谈JavaScript浅拷贝和深拷贝
You might like
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
动态加载js的几种方法
2006/10/23 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
python实现汽车管理系统
2018/11/30 Python
基于python历史天气采集的分析
2019/02/14 Python
详解Python装饰器
2019/03/25 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
python实现按行分割文件
2019/07/22 Python
QML使用Python的函数过程解析
2019/09/26 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
在pycharm中实现删除bookmark
2020/02/14 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
简历自我评价模版
2014/01/31 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
资金申请报告范文
2015/05/14 职场文书
党员身份证明材料
2015/06/19 职场文书
高中地理教学反思
2016/02/19 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
PHP正则表达式之RCEService回溯
2022/04/11 PHP