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 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
浅谈javascript的数据类型检测
Jul 10 Javascript
jquery中eq和get的区别与使用方法
Apr 14 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
使用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 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
python Selenium 库的使用技巧
2020/10/16 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
大专生工程监理求职信
2013/10/04 职场文书
机械工程师岗位职责
2014/06/16 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
对讲机知识
2022/04/07 无线电
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle