文档章节

JavaScript的计时器的工作原理

第三方支付接口
 第三方支付接口
发布于 2014/11/30 16:49
字数 1841
阅读 56
收藏 0

最近都在看一些JavaScript原理层面的文章,恰巧看到了jQuery的作者的一篇关于JavaScript计时器原理的解析,于是诚惶诚恐地决定把原文翻译成中文,一来是为了和大家分享,二来是为了加深自己对于JavaScript的理解。原文链接:http://ejohn.org/blog/how-javascript-timers-work/

原文翻译:

从基础层面来讲,理解JavaScript计时器的工作原理是很重要的。由于JavaScript是单线程的,所以很多时候计时器并不是表现得和我们的直观想象一样。让我们从下面的三个函数开始,它们能够让我们有机会去构造和操作计时器。

  • var id  =setTimeout(fn, delay); -创建了一个简单的计时器,在经过给定的时间后,回调函数将会被执行。这个函数会返回一个唯一的ID,便于在之后某个时间可以注销这个计时器。
  • var id = setInterval(fn, delay); -和setTimeout类似,但是每经过一段时间(给定的延时),所传递的函数就会被执行一次,直到这个定时器被注销。
  • clearInterval(id); , clearTimeout(id); -接受一个计时器ID(由之前两种计时器返回)并且停止计时器回调函数的执行。

为了理解计时器的内部工作原理,我们首先需要了解一个非常重要的概念:计时器设定的延时是没有保证的。因为所有在浏览器中执行的JavaScript单线程异步事件(比如鼠标点击事件和计时器)都只有在它有空的时候才执行。这最好通过图片来说明,就如下面这张图所示:

这一张图片里面有很多信息需要慢慢消化,但是彻底地理解这张图片将会让你对JavaScript异步执行是如何工作的有一个更好的认识。这张图片是从一维的角度来阐述的:在垂直方向是以毫秒计的时间,蓝色的块代表了

当前正在执行的JavaScript代码段。比如第一段JavaScript执行了大概18毫秒,鼠标点击事件大概执行了11毫秒。

由于JavaScript每次只能执行一段代码(基于它单线程的特性),所以所有这些代码段都阻塞了其他异步事件的执行。这就意味着,当一件异步事件(比如鼠标点击,计时器触发和一个XMLHttpRequest 请求完成)触发的时候,这些事件的回调函数将排在执行队列的最后去等待执行(排队的方式因浏览器不同而不同,这里只是一个简化)。

一开始,在第一段代码段内,两个计时器被初始化:一个10ms的 setTimeout 和一个10ms的setInterval。由于计时器在哪儿初始化就在那儿开始计时,所以实际上计时器在第一段代码执行完成之前就触发了。然而,计时器的回调函数并不是立即执行了(单线程限制了不能这样做),相反的是,回调函数排在了执行队列的最后,等到下一个有空的时间去执行。

此外,在第一个代码块内我们看到了一个鼠标点击事件发生了。与之相关的javascript异步事件(我们不可能预测用户会在什么时候去采取这样的动作,因此这个事件被视为异步的)并不会立即执行。和计时器一样的是,它被放到了队列的最后去等待执行。

在第一个代码快执行完成的时候,浏览器会立即发出这样的询问:谁正在等待执行?这个时候,鼠标点击处理程序和计时器回调函数都在等待执行。浏览器选择了其中一个(鼠标点击回调函数)并且立即执行它。为了执行,计时器会等到下一个可能执行的时间。

我们注意到,当鼠标点击事件对应的处理程序正在执行的时候,第一个定时回调函数也要执行了。同定时计时器一样,它也在队列的后面等待执行。然而,我们可以注意到,当定时器再一次触发(在计时器回调函数正在执行的时候),这一次定时器回调函数被丢弃了。如果在执行一大块代码块的时候,你把所有的定时回调函数都放在队列的最后,结果就是一大串定时回调函数将会没有间隔的一起执行,直到完成。相反,在把更多定时回调函数放到队列之前,浏览器会静静的等待,知道队列中的所有定时回调函数都执行完成。

事实上,我们可以看到,当interval回调函数正在执行的时候,interval第三次被触发。这给我们一个很重要的信息:interval并不关心当前谁在执行,它的回调函数会不加区分地进入队列,即使存在这个回调函数会被丢弃的可能。

最后,当第二个定时回调函数完成执行的时候,我们可以看到javascript引擎已经没有什么需要执行了。这意味着,浏览器现在正在等待一个新的异步事件的发生。我们可以看到在50ms的时候,定时回调函数再一次被触发。然而,这一次,没有其他代码阻塞他的执行了,所以他立即执行了定时回调函数。

让我们看一个例子来更好地阐述 setTimeout 和setInterval的区别。

1 setTimeout(function(){ 2 /* Some long block of code... */ 3 setTimeout(arguments.callee, 10); 4 }, 10); 5 6 setInterval(function(){ 7 /* Some long block of code... */ 8 }, 10);

第一眼看上去这两段代码在功能上是等价的,但事实上却不是。值得注意的是,setTimeout 这段代码会在每次回调函数执行之后至少需要延时10ms再去执行一次(可能是更多,但是不会少)。但是setInterval会每隔10ms就去尝试执行一次回调函数,不管上一个回调函数是不是还在执行。

从这里我们能够学到很多,让我们来概括一下:

  • javascript引擎只有一个线程,迫使异步事件只能加入队列去等待执行。
  • 在执行异步代码的时候, setTimeout  和 setInterval  是有着本质区别的。
  • 如果计时器被正在执行的代码阻塞了,它将会进入队列的尾部去等待执行直到下一次可能执行的时间出现(可能超过设定的延时时间)。
  • 如果interval回调函数执行需要花很长时间的话(比指定的延时长),interval有可能没有延迟背靠背地执行。

上述这一切对于理解js引擎是如果工作的无疑是很重要的知识,尤其是大量的典型的异步事件发生时,对于构建一个高效的应用代码片段来说是一个非常有利的基础。

© 著作权归作者所有

第三方支付接口
粉丝 14
博文 50
码字总数 28661
作品 0
深圳
程序员
私信 提问
javascript计时器的工作原理解析

代码使用方法: 说明:这篇文章节选自John Resig 的《Secrets of the JavaScript Ninja》一书,本人翻译只是供大家学习,翻译不足之处,请斧正。 这篇文章主要从下面几个方面解读计时器: 计...

0000001
2011/05/13
636
0
javascript计时器原理

昨天在w3c上学javascript的计时器的时候,写了个计时程序。 源码很简单: 运行的时候,我突然发现,多次点击开始计时的话,每点一次,就会多一个计时器,时间增加的越来越快。 原以为是启动了...

cassia_
2015/07/07
117
2
通过 React Hooks 声明式地使用 setInterval

本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: 用起来没你想的简单。 Ryan Florence 在他的推文里面说到: 不少朋友跟我提起,setInterv...

腾讯云加社区
02/20
7
0
【译】理解异步 JavaScript-学习JavaScript是怎么工作的

原文地址:Understanding Asynchronous JavaScript 原文作者:Sukhjinder Arora 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:H246802 校对者:ElizurHz, Yangfan...

H246802
01/05
0
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
62
0

没有更多内容

加载失败,请刷新页面

加载更多

for循环

九九乘法表 示例:for(int i = 1; i <= 9; i++){ for (int j = 1; j <= i; j++) { // 每次开始i循环,j都会重新定义为j=1,然后开始循环计算 System.out.print(j +......

Shutting
32分钟前
9
0
小王子1

一定要帅! 韩国设计师品牌 insgram全世界得网红 韩国潮男穿搭 HM 找到穿衣服最好看的人,跟他比,比他好看。 在兴趣前,不要表现目的性,压力 关系是不热就冷的! 不喜欢压力,不喜欢负责任...

阿锋zxf
51分钟前
10
0
时间戳

1 loadTimeString(ts) { var d = new Date(); if (String(ts).length == 10) { d = new Date(ts * 1000); ......

东方巨人
52分钟前
7
0
Redis Cluster

Redis Cluster 集群 redis集群有以下几种方式 普通一主多从 普通一主多从+哨兵 cluster分片模式 一主多从 搭建方式网上很多,就不多描述了。 这种集群方式,一般master用作写,slave用做读,...

lazy~
53分钟前
14
0
 介绍一款优秀的通用管理权限快速开发框架

这是一套以权限管理为主的轻量化快速开发框架,配置有流程、专业表单、权限、app、企业微信等基础功能模块,在开发通用软件的效率上很有优势。 软件平台常用研发需求分析 《那些年我们一起做...

我想造火箭
今天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部