WEB开发网
开发学院网页设计JavaScript JavaScript的单线程性质以及定时器的工作原理 阅读

JavaScript的单线程性质以及定时器的工作原理

 2010-09-14 13:39:44 来源:WEB开发网   
核心提示:最近在写JavaScript时遇到一些问题,就是当JavaScript多事件连续触发,JavaScript的单线程性质以及定时器的工作原理,JavaScript的单线程引擎是如何控制的,找了一些资料,例如第一个JavaScript代码执行块需要大约18ms,鼠标点击所触发的代码执行块需要11ms,觉得很有用,在此分享一

最近在写JavaScript时遇到一些问题,就是当JavaScript多事件连续触发,JavaScript的单线程引擎是如何控制的。找了一些资料,觉得很有用,在此分享一下。

虽然不是原创,但是觉得此文章对JavaScript程序员非常有用。翻译的不是十分精确,但希望对大家有用。

原文:John Resig  http://ejohn.org/blog/how-javascript-timers-work/

How JavaScript Timers Work

从基础的层面来讲,理解JavaScript的定时器是如何工作的是非常重要的。计时器的执行常常和我们的直观想象不同,那是因为JavaScript引擎是单线程的。我们先来认识一下下面三个函数是如何控制计时器的。

var id = setTimeout(fn, delay); - 初始化一个计时器,然后在指定的时间间隔后执行。该函数返回一个唯一的标志ID(Number类型),我们可以使用它来取消计时器。

var id = setInterval(fn, delay); - 和setTimeout有些类似,但它是连续调用一个函数(时间间隔是delay参数)直到它被取消。

clearInterval(id);, clearTimeout(id); - 使用计时器ID(setTimeout 和 setInterval的返回值)来取消计时器回调的发生

为了理解计时器的内在执行原理,有一个重要的概念需要加以探讨:计时器的延迟(delay)是无法得到保障的。由于所有JavaScript代码是在一个线程里执行的,所有异步事件(例如,鼠标点击和计时器)只有拥有执行机会时才会执行。用一个很好的图表加以说明:

JavaScript的单线程性质以及定时器的工作原理

(点击查看大图)

在这个图表中有许多信息需要理解,如果完全理解了它们,你会对JavaScript引擎如何实现异步事件有一个很好的认识。这是一个一维的图标:垂直方向表示时间,蓝色的区块表示JavaScript代码执行块。例如第一个JavaScript代码执行块需要大约18ms,鼠标点击所触发的代码执行块需要11ms,等等。

1 2 3  下一页

Tags:JavaScript 线程 性质

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接