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