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 相关文章推荐
checkbox勾选判断代码分析
Jun 11 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 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
浅析PHP的ASCII码转换类
2013/07/05 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Python创建xml文件示例
2017/03/22 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
使用python实现多维数据降维操作
2020/02/24 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
新年联欢会主持词
2014/03/27 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
高中学校对照检查材料
2014/08/31 职场文书
2014年化验室工作总结
2014/11/21 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技
volatile保证可见性及重排序方法
2022/08/05 Java/Android