开发者社区> 相思叶> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript定时器的工作原理(翻译)

简介: JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的理解了js的单线程工作模式。
+关注继续查看

JavaScript定时器的工作原理(翻译)

标签(空格分隔): JavaScript定时器


最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的理解了js的单线程工作模式。在这里翻译一下供大家参考,原文地址.
翻译正文
从根本上讲,了解JavaScript定时器的工作原理非常重要。通常 js的单线程表现的。让我们首先看一下可以构造和操作定时器的三个函数。


 - 启动单个定时器,在延迟后调用指定的功能。该函数返回一个唯一的ID,该Id可以用于取消定时器
    var id = setTimeout(fn, delay); 
 - 类似setTimeout但不断地调用函数(每次都有延迟),直到它被取消,类似于定时任务。同上也返回唯一ID用于取消定时器
    var id = setInterval(fn, delay); 
 - 接受计时器ID(由上述任一功能返回)并停止触发计时器回调。
    clearInterval(id);
    clearTimeout(id); 

为了理解定时器的内部工作原理,我们需要探索一个重要的概念:定时器延迟并不能保证准确。由于浏览器中的所有JavaScript都在单个线程上执行,因此异步事件(例如鼠标单击和计时器)仅在可被执行时运行。使用图表可以最好地证明这一点,如下所示:

这里写图片描述

这个图中有很多信息需要理解,完全理解它会让你更好地了解异步JavaScript执行的工作方式。这个图是一维的:垂直方向,我们有(挂钟)时间(译注:左侧的时间刻度),以毫秒为单位。蓝色框表示正在执行的JavaScript部分。例如,第一个JavaScript块执行大约18ms,鼠标单击块大约需要11ms,依此类推。

由于JavaScript一次只能执行一段代码(由其单线程性质决定),因此每个代码块都“阻塞”其他异步事件的进度。这意味着当异步事件发生时(如鼠标单击,计时器触发或XMLHttpRequest完成),它会先排队等待(译注:可以理解为一个队列)以后执行(这种排队实际发生的方式因浏览器到浏览器而异,这里是做了一个简单说明)。

首先,在JavaScript的第一个块中,启动两个定时器:10ms setTimeout和10ms setInterval。由于计时器启动的位置和时间,它实际上在我们实际完成第一个代码块之前触发。但请注意,它不会立即执行(由于线程,它无法执行此操作)而是进入排队队列,以便在下一个可用时刻执行。

此外,在第一个JavaScript块中,我们看到鼠标单击。鼠标点击事件关联的JavaScript回调(我们永远不知道用户何时执行一个操作,因此它被认为是异步的)无法立即执行,因此,与初始计时器一样,它排队等待稍后执行。

在JavaScript的初始块完成后,执行浏览器会立即询问:队列中有什么等待执行的任务?在这种情况下,鼠标单击处理程序和计时器回调都在等待。然后浏览器选择一个(鼠标单击回调)并立即执行它。计时器将等到下一个时间被从队列中取出执行。

请注意,当鼠标单击处理程序执行时,执行第一个间隔回调。与计时器一样,它的处理程序进入排队等待以后执行。但是,请注意,当再次触发间隔时(在执行timer程序时),此时Interval的间隔回调被丢弃(译者注:这里不是很理解,欢迎留言交流指教。是否是因为已经有interval在排队?)。如果要在执行大块代码时调用间隔回调,间隔回调将连续加入到任务队列中,它们之间没有延迟。浏览器往往只是简单的去队列中取任务直到队列中没有其他任务。

事实上,我们可以看到,当间隔本身正在执行时,第三个间隔回调会触发。这向我们展示了一个重要的事实:Intervals不关心当前正在执行的内容,它们会不加选择地排队。

最后,在第二个间隔回调完成执行后,我们可以看到JavaScript引擎没有任何任务可以执行。这意味着浏览器现在等待发生新的异步事件。当间隔再次触发时,在50ms的位置。但是,这一次,没有任何程序正在执行,所以它会立即被触发。

让我们看一个例子,以更好地说明setTimeout和setInterval之间的差异。


setTimeout(function(){
  /* Some long block of code... */
  setTimeout(arguments.callee, 10);
}, 10);
 
setInterval(function(){
  /* Some long block of code... */
}, 10);

这两段代码乍一看似乎在功能上等同,但它们不是。值得注意的是,setTimeout代码在前一次回调执行后总是至少有10ms的延迟(它可能最终会更多,但绝不会少于10ms),而setInterval在这段长代码执行期间它都会尝试每10ms执行一次回调(译者注:可理解为在这段长代码执行期间,会每10ms添加一个任务进队列,中间无间隔)。

我们在这里学到了很多,让我们回顾一下:

JavaScript引擎只有一个线程,迫使异步事件排队等待执行。
setTimeout并且setInterval它们在执行异步代码方面有着根本的不同。
如果计时器被阻止立即执行,它将被延迟到下一个可能的执行点(这将超过所需的延迟)。
如果setInterval中回调程序执行时间足够长(超过指定的延迟),则间隔可以无延迟地执行(译者注:因为在一个回调没有运行完的时候就会再加入一个回调)。
所有这些都是用来了解JavaScript引擎的工作原理的非常重要的知识,尤其是发生的大量异步事件的时候,为构建高级应用程序代码奠定了基础。

希望大家多评论交流,互相学习

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
js实现禁止网页缩放(Ctrl+鼠标、+、-缩放有效亲测)
js实现禁止网页缩放(Ctrl+鼠标、+、-缩放有效亲测)背景:现在是凌晨1:35我还在帮客户修改网页,要求不高但来钱快,学生党不容易啊,客户提到了很多网页的优化,其中这一条 让我头疼了许久,大家就不用踩坑了,看下面的就可以了...
12 0
JS实现百叶窗特效
👀每天实习一个小案例,编程能力才会突飞猛进。
14 0
JS使用canvas实现(下雨天)特效
今天利用canvas实现一个简单的下雨天的网页案例!
13 0
js:实现一个类似Python的range函数生成数字序列
js:实现一个类似Python的range函数生成数字序列
30 0
js:富文本编辑器实现@某人
js:富文本编辑器实现@某人
26 0
求商品SKU的所有组合(笛卡尔积)-js和php实现版
求商品SKU的所有组合(笛卡尔积)-js和php实现版
13 0
JavaScript实现的网页放大镜效果
今天在观看视频学习的时候,学到了一个小技巧。就拿过来与大家进行分享一下啦。 实现的原理 分析需求:需要两张图,一大一小。然后根据鼠标的动作显示出不同的区域块的图像。 核心:鼠标事件的获取和处理。
1249 0
用JavaScript实现网页动态水印
原文:用JavaScript实现网页动态水印 1.基本原理 页面加载后,通过javascript创建页面元素div,并在div元素中创建文本节点,展示水印内容 设置div元素样式,将其zIndex设置一个较高的值,并设置透明度,实现浮在页面的水印效果 其核心逻辑如下所示 var mask_div = document.
1053 0
Javascript实现网页上的多级菜单(竖着)
使用方法:1,包含menu.js和menu.css 2,用创建主菜单类   main = new MainMenu(10,50,"My Menu");这里,MainMenu的前两个参数表示其左上角位置坐标,前者为left,后者为top。第三个参数为菜单标题。之后用MenuItem类建立菜单项MenuItem的源型如下:   function MenuItem(_parent,_caption
1098 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JavaScript 语言在引擎级别的执行过程
立即下载
Javascript异步编程
立即下载
Javascript中的函数
立即下载