javascript定时器原理

原文来自John Resig how-javascript-timers-work

如图所见，当有js代码在执行时，回调函数会被加入带待执行的队列，当js执行间隔或UI事件执行的间隔，才执行等待队列的回调

var test = function(){
　　　　setTimeout(function(){
　　　　console.log('timer');
　　}, 0);
　　console.log('common');
}
  
test();
//common
//timer

另外，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才fire进队列）

setInterval会尝试每隔 10 毫秒执行一次，它不会在乎上一次执行到现在的间隔有多少。（每个间隔，fire进队列一个回调）

 

结论：

• javascript运行时单线程的，这个线程运行包括：串行js代码、回调函数、响应用户操作的UI变化。而异步的回调代码，会在引擎运行时加入等待队列，引擎空闲时，才依次执行队列的内容。因此function内的setTimeout函数会在这个function执行完毕后执行。
• setTimeout和setInterval都是异步回调，但存在区别。当一个代码执行断fire进队多个setInterval的回调，则此代码结束时，将会连续执行多次setInterval的回调。而setTimeout因为进队列前就已经等待了足够定时时间，所以不会出现小于定时时间执行。