javascript 定时器工作原理分析


Posted in Javascript onDecember 03, 2016

setTimeout()

MDN对 setTimeout 的定义为:

在指定的延迟时间之后调用一个函数或执行一个代码片段。

语法

setTimeout 的语法非常简单,第一个参数为回调函数,第二个参数为延时的时间。函数返回一个数值类型的ID唯一标示符,此ID可以用作 clearTimeout 的参数来取消定时器:

var timeoutID = window.setTimeout(code, delay);

IE0+ 还支持回调参数的传入:

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);

setInterval()

MDN 对 setInterval 的定义为:

周期性地调用一个函数(function)或者执行一段代码。

由于 setInterval 和 setTimeout 的用法一样,所以这里不再列出。

对第二个参数(delay)的说明

由于javascript 的事件循环机制,导致第二个参数并不代表延迟delay毫秒之后立即执行回调函数,而是尝试将回调函数加入到事件队列。实际上,setTimeout 和 setInterval 在这一点上处理又存在区别:

  • setTimeout:延时delay毫秒之后,啥也不管,直接将回调函数加入事件队列。
  • setInterval: 延时delay毫秒之后,先看看事件队列中是否存在还没有执行的回调函数(setInterval的回调函数),如果存在,就不要再往事件队列里加入回调函数了。

所以,当我们的代码中存在耗时的任务时,定时器并不会表现的如我们所想的那样。

通过一个例子来理解

下面的代码,本来希望能够在 100ms 和 200ms 的时候(也就是刚好等待 100ms)调用回调函数:

var timerStart1 = now();
setTimeout(function () {
 console.log('第一个setTimeout回调执行等待时间:', now() - timerStart1);

 var timerStart2 = now();
 setTimeout(function () {
  console.log('第二个setTimeout回调执行等待时间:', now() - timerStart2);
 }, 100);
}, 100);
// 输出:
// 第一个setTimeout回调执行等待时间: 106
// 第二个setTimeout回调执行等待时间: 107

这样的结果看上去正是我们所想的那样,但是一旦我们在代码中加入了耗时的任务时候,结果就不像我们所期望的那样了:

var timerStart1 = now();
setTimeout(function () {
 console.log('第一个setTimeout回调执行等待时间:', now() - timerStart1);

 var timerStart2 = now();
 setTimeout(function () {
  console.log('第二个setTimeout回调执行等待时间:', now() - timerStart2);
 }, 100);

 heavyTask(); // 耗时任务
}, 100);

var loopStart = now();
heavyTask(); // 耗时任务
console.log('heavyTask耗费时间:', now() - loopStart);

function heavyTask() {
 var s = now();
 while(now() - s < 1000) {
 }
}

function now () {
 return new Date();
}
// 输出:
// heavyTask耗费时间: 1015
// 第一个setTimeout回调执行等待时间: 1018
// 第二个setTimeout回调执行等待时间: 1000

两个 setTimeout 的等待事件由于耗时任务的存在不再是 100ms 了!我们来描述一下事情的经过:

  1. 首先,第一个耗时任务(heavyTask())开始执行,它需要大约 1000ms 才能执行完毕。
  2. 从耗时任务开始执行,过了 100ms, 第一个 setTimeout 的回调函数期望执行,于是被加入到事件队列,但是此时前面的耗时任务还没执行完,所以它只能在队列中等待,直到耗时任务执行完毕它才开始执行,所以结果中我们开的看到的是: 第一个setTimeout回调执行等待时间: 1018。
  3. 第一个 setTimeout 回调一执行,又开启了第二个 setTimeout, 这个定时器也是期望延时 100ms 之后能够执行它的回调函数。 但是,在第一个 setTimeout 又存在一个耗时任务,所有它的剧情跟第一个定时器一样,也等待了 1000ms 才开始执行。

可以用下面的图来概括:

javascript 定时器工作原理分析

再来看 setInterval 的一个例子:

var intervalStart = now();
setInterval(function () {
 console.log('interval距定义定时器的时间:', now() - loopStart);
}, 100);

var loopStart = now();
heavyTask();
console.log('heavyTask耗费时间:', now() - loopStart);

function heavyTask() {
 var s = now();
 while(now() - s < 1000) {
 }
}

function now () {
 return new Date();
}
// 输出:
// heavyTask耗费时间: 1013
// interval距定义定时器的时间: 1016
// interval距定义定时器的时间: 1123
// interval距定义定时器的时间: 1224

上面这段代码,我们期望每隔 100ms 就打出一条日志。相对于 setTimeout 的区别, setInterval 在准备把回调函数加入到事件队列的时候,会判断队列中是否还有未执行的回调,如果有的话,它就不会再往队列中添加回调函数。 不然,会出现多个回调同时执行的情况。

可以用下面的图来概括:

javascript 定时器工作原理分析

总结

上面对javascript定时器执行原理进行了简要的分析,希望能够帮助我们更深入的理解javascript。文中有描述不当的地方可以在评论中指出。

Javascript 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 #Javascript
简单理解Vue条件渲染
Dec 03 #Javascript
学习vue.js条件渲染
Dec 03 #Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 #Javascript
jquery 判断div show的状态实例
Dec 03 #Javascript
利用浮层使select不可选的实现方法
Dec 03 #Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 #Javascript
You might like
php输出反斜杠的实例方法
2019/09/19 PHP
jquery垂直公告滚动实现代码
2013/12/08 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
python使用pil生成缩略图的方法
2015/03/26 Python
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
Python中按键来获取指定的值
2019/03/02 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
python Scrapy框架原理解析
2021/01/04 Python
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
遗体告别仪式答谢词
2014/01/23 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
2014年质量工作总结
2014/11/22 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏
JS setTimeout与setInterval的区别
2022/04/20 Javascript