How JavaScript timers works

JavaScript timer understand the working principle is very important for learning JavaScript. Because JavaScript is a single thread running timer uses less, and is not very intuitive. Let's learn how to define JavaScript, operation and destroyed by a three timer functions.

the setTimeout ID = var (fn, Delay); - the definition of a timer function fn call after a specified time delay. The function returns a unique identifier ID, if you do not use this timer can use this to cancel.
the above mentioned id = setInterval var (fn, delay); - similar setTimeout, but will delay calls the specified function fn specified time intervals, until the abolition of the timer.
the clearTimeout (ID); the clearInterval (ID); - The functions accept an identification ID (ID corresponding to the above two functions are returned), the callback timer is stopped.

To understand how timers work, we must first clarify a concept, the timer callback function does not guarantee a certain delay execution at a specified time. Since all JavaScript browsers are performed on a single thread, so asynchronous events (such as mouse clicks and timers) run only when the synchronization time after executing a vacancy exists only in the execution. Referring next to FIG:

This picture which contains a lot of information, in order to understand what they need to understand JavaScript asynchronous operation mechanism. Time scale on the vertical direction in this FIG., In milliseconds, represents the blue part of executing JavaScript event. For example, the first block performed for about 18 milliseconds JavaScript, Mouse Click Callback executed approximately 11 milliseconds, and so on back.

由于JavaScript是单线程的，不能同时执行两段JavaScript代码，所以上面的蓝色的”块“都是在上一个块执行完才能执行下一个块。这意味这当一个异步任务（例如，点击鼠标事件，定时器，ajax访问）出现的时候，它将被放入到异步队列（放入队列的方式和浏览器有关，不同浏览器有不同的实现）并随后执行。

首先，在第一个代码块中，JavaScript代码中首先出先两个定时器：10ms Timer starts，10ms Interval starts。这两个定时器的回调函数何时执行取决于第一个代码块的所有代码何时执行完。请注意，由于单线程的原因，它不会立即执行。

同时，在第一个代码块里，还有一个鼠标事件Mouse Click Occurs，和上面的定时器一样，这个异步事件（点击鼠标这种用户交互是异步执行的，因为JavaScript不知道用户什么时候会点击鼠标）的回调不会立即执行，而是放在异步队列里排队等待执行。

在初始的代码块执行完毕之后，浏览器随即开始轮询这个异步队列：有那些操作等待着被执行呢？在这个例子中，鼠标点击。浏览器会选择一个立即执行（这里是鼠标点击的回调时间）。定时器会等待指定的时间delay，然后执行。

注意点击鼠标回调事件在第一个事件循环，定时器回调在随后的循环中处理。但是，在后面的事件循环中（在执行定时器处理程序时），setTimeout定时器回调函数就会被抛弃，不再执行了。如果在多个定时器之后有一大段同步任务执行，则同步任务执行完之后这些定时器回调会被立即执行，没有延迟（这个延迟可能很小，就是事件循环的间隔），直至完成。浏览器倾向于等到没有更多的异步任务被加入到异步任务队列中再开始执行。

实际上，我们可以看到在事件循环本身正在执行的同时触发了第三个回调的情况。这向我们显示了一个重要的事实：事件循环不关心当前正在执行的内容，它们会不加区分地排队，即使这意味着从触发事件，到满足条件执行回调函数之间，有一部分事件被浪费掉了。

最后，在第二个事件回调完成执行之后，我们可以看到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在在10毫秒的delay之后执行代码（只会多余10毫秒，绝不会少），setInterval则在每隔10毫秒的延迟时执行回调代码，不管上次的回调是否已经执行完。

好了，本文中介绍的一些要点，现在回顾一下：

JavaScript引擎在运行时只有一个线程，从而迫使异步事件排队等待执行。
setTimeout和setInterval在执行异步代码的方式上不同。
如果定时器被阻止立即执行，它将延迟到下一个可能的执行点（比所需的延迟时间更长）。
如果定时器延迟的事件足够长，则在到点后会立即执行，没有延迟。

所有这些都是非常重要的基础知识。了解JavaScript引擎的工作原理，尤其是在通常发生大量异步事件的情况下，为构建高级应用程序代码奠定了良好的基础。

来源：https://johnresig.com/blog/how-javascript-timers-work/

本文是John Resig很早的一篇文章，通过setTimeout，setInterval两个函数的比较，可以了解JavaScript事件循环机制。

How JavaScript timers works

Guess you like