John:How JavaScript Timers Work
John大神的bolg链接:http://ejohn.org/blog/how-javascript-timers-work/
JavaScript中的定时器经常表现的跟我们想象的不同,我们用三个函数来讲解这个问题。
var id = setTimeout(fn, delay); //初始化一个定时器,delay ms 之后调用函数fn。
var id = setInterval(fn, delay); //跟第一个定时器类似,只不过是每隔delay ms 都调用函数fn。
clearInterval(id);
clearTimeout(id); //接受一个定时器id作为参数,并撤销该定时器。
博客正文待翻译...
setTimeout(function(){
/* Some long block of code... */
setTimeout(arguments.callee, 10);
}, 10); setInterval(function(){
/* Some long block of code... */
}, 10);
这两段代码第一眼看上去功能相同,其实不然。
setTimeout里的代码在上一次执行完之后总是会有至少10ms的delay,如果如果线程没有堵塞的话(代码立即执行)那么正好等待10ms。两次代码之间的时间间隔将是{代码执行时间+(>=10ms)}。
setInterval里的代码则会不管上次的代码执行情况,每间隔10ms尝试执行,如果执行时间大于10ms,那么两次执行则会连续。
总结:
1. JavaScript引擎为单线程,所有异步事件需要先入队再执行。
2. setTimeout和setInterval原理不同。
3. 如果一个timer(特指setTimeout定时器)回调函数的执行被阻塞,那么它会等到线程空闲再执行,所以总的delay时间可能比设定的时间要大。
4. Intervals的执行时间如果比设定时间长的话,则Intervals的两次回调函数的执行将连续。
John:How JavaScript Timers Work的更多相关文章
- Javascript高性能动画与页面渲染
转自:http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering No setT ...
- JavaScript中的计时器原理
理解John Resig 在 How JavaScript Timers Work. 原理分析 timer(setInterval,setTimeout)有一个很重要的概念,时间延迟的长短是不稳定的. ...
- 《无所不能的JavaScript编程系列:setTimeout 简笔》
前言:问题引出 JavaScript中会经常用到setTimeout来推迟一个函数的执行,如: setTimeout(function(){alert("Hello World") ...
- [转]Javascript高性能动画与页面渲染
No setTimeout, No setInterval 作者 李光毅 发布于 2014年4月30日 如果你不得不使用setTimeout或者setInterval来实现动画,那么原因只能是你需要精 ...
- 最简单的JavaScript模板引擎
在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...
- Javascript定时器(二)——setTimeout与setInterval
一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...
- Javascript定时器(一)——单线程
一.JavaScript 引擎是单线程的 可以从下面的代码中看到,第一个用setTimeout中的代码是死循环,由于是单线程,下面的两个定时器就没机会执行了. <script type=&quo ...
- 从setTimeout谈JavaScript运行机制
从setTimeout说起 众所周知,JavaScript是单线程的编程,什么是单线程,就是说同一时间JavaScript只能执行一段代码,如果这段代码要执行很长时间,那么之后的代码只能尽情地等待它执 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--JavaScript内置对象
1.什么事对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方 ...
随机推荐
- CCNode详解
cocos2d的所有类都以CC开头,那么实际上这个类的名字就是Node,类如其名,这个类的实例就是一个节点.Cocos2d的类是树状继承的,而在内存中,各个实例之间也是以“树”这种数据结构相关联的., ...
- 未能使用“Csc”任务的输入参数初始化该任务
今天.NetCore2.1版本,建立Asp.net Core web应用程序项目时,报以下错误: 未能使用“Csc”任务的输入参数初始化该任务. “Csc”任务不支持“SharedCompilatio ...
- MQ见解
MQ 消息队列是系统级.模块级的通信.RPC是对象级.函数级通信. 1) 什么是推模式,什么是拉模式 2) 有没有消息丢失情况,如何防止 3) MQ用来解决什么问题 4) 你们用的什么MQ,为什么要用 ...
- NAND Flash底层原理,SLC MLC TLC比较
NAND-Flash 的存储原理 固态硬盘最小单元的基本架构如下: 我们知道计算机中所有的信息储存最终都必须回归到 0与1,原则上,只要存储单元能提供两种或两种以上可供辨识的状态,便可以拿来纪录数据. ...
- Docker原理探究
问题思考:-------------------------------------Docker浅显原理理解-------------------------------------P1. ubunt ...
- [git hooks] pre-commit 配置
在开发过程中,通常使用 eslint 来规范团队的代码风格.但是 eslint 只能在开发服务器启动的时候才去检验代码.如果一个人在不启动开发服务器的情况下,修改了代码直接提交到git,那么别人pul ...
- python图像处理 模式转化简单总结
图像处理库PIL有九种不同模式:1,L,P,RGB,RGBA,CMYK,YCbCr,I,F 1.模式“1” 模式“1”为二值图像,非黑即白.但是它每个像素用8个bit表示,0表示黑,255表示白. 2 ...
- Unity导入模型出现 (Avatar Rig Configuration mis-match. Bone length in configuration does not match position in animation)?
昨天遇到这两个模型导入的问题,查了一下资料,自己摸索了一下解决方法..总结一下~ 出现的原因:(问题1)Warning 当模型文件导入以后并且设置Animation Type是Generic的时候,动 ...
- CEPH LIO iSCSI Gateway
参考文档: Ceph Block Device:http://docs.ceph.com/docs/master/rbd/ CEPH ISCSI GATEWAY:http://docs.ceph.co ...
- 手机访问PC端
输入所要访问的端口,然后默认下一步即可.