javascript定时器的工作原理详解编程语言

     我们来了解一下定时器的工作原理,这里将用引用 How JavaScript Timers Work 中的例子来解释定时器的工作原理,该图为一个简单版的原理图。




    上图中,左侧数字代表时间,单位毫秒；左侧文字代表某一个操作完成后,浏览器去询问当前队列中存在哪些正在等待执行的操作；蓝色方块表示正在执行的代码块；右侧文字代表在代码运行过程中,出现哪些异步事件。该图大致流程如下：

        1.程序开始时,有一个JS代码块开始执行,执行时长约为18ms,在执行过程中有3个异步事件触发,其中包括一个setTimeout、鼠标点击事件、setInterval

        2.第一个setTimeout先运行,延迟时间为10ms,稍后鼠标事件出现,浏览器在事件队列中插入点击的回调函数,稍后setInterval运行,10ms到达之后,setTimeout向事件队列中插入setTimeout的回调

        3.当第一个代码块执行完成后,浏览器查看队列中有哪些事件在等待,他取出排在队列最前面的代码来执行

        4.在浏览器处理鼠标点击回调时,setInterval再次检查到到达延迟时间,他将再次向事件队列中插入一个interval的回调,以后每隔指定的延迟时间之后都会向队列中插入一个回调

        5.后面浏览器将在执行完当前队头的代码之后,将再次取出目前队头的事件来执行

    这里只是对定时器的原理做一个简单版的描述,实际的处理过程比这个复杂。

转载请注明来源网站:blog.ytso.com谢谢！