javascript定时器原理-优快云博客

本文详细探讨了JavaScript中定时器的工作原理，包括setTimeout与setInterval的区别。阐述了JavaScript的单线程特性，以及异步回调如何在执行队列中工作。强调了函数内的setTimeout会在当前函数执行完毕后执行，而setInterval与setTimeout在执行频率上的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文来自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因为进队列前就已经等待了足够定时时间，所以不会出现小于定时时间执行。

转载于:https://www.cnblogs.com/sodawy/archive/2012/02/07/2341460.html