JavaScript中setTimeout的那些事儿

一、setTimeout那些事儿之单线程 

一直以来,大家都在说Javascript是单线程,浏览器无论在什么时候,都且只有一个线程在运行JavaScript程序。 

但是,不知道大家有疑问没——就是我们在编程过程中的setTimeout(类似的还有setInterval、Ajax),不是异步执行的吗?!! 

例如:

<!DOCTYPE html> <head> <title>setTimeout</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> console.log("a"); //利用setTimeout延迟执行匿名函数 setTimeout(function(){ console.log("b"); },100); console.log("c"); </script> </body> </html>

运行代码,打开chrome调试器,得如下结果

JavaScript中setTimeout的那些事儿

这个结果很容易理解,因为我setTimeout里的内容是在100ms后执行的嘛,当然是先输出a,再输出c,100ms后再输出setTimeout里的b嘛。 

咦,那Javascript这不就不是单线程了嘛,这不就可以实现多线程了?!! 

其实,不是的。setTimeout没有打破JavaScript的单线程机制,它其实还是单线程。 

为什么这么说呢,那就得理解setTimeout到底是个怎么回事。 

请看下面的代码,猜结果:

<!DOCTYPE html> <head> <title>setTimeout</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> var date = new Date(); //打印才进入时的时间 console.log('first time: ' + date.getTime()); //一秒后打印setTimeout里匿名函数的时间 setTimeout(function(){ var date1 = new Date(); console.log('second time: ' + date1.getTime() ); console.log( date1.getTime() - date.getTime() ); },1000); //重复操作 for(var i=0; i < 10000 ; i++){ console.log(1); } </script> </body> </html>

看了上面的代码,猜猜输出的结果是多少呢?1000毫秒? 

我们打开chrome调试器,见下图

JavaScript中setTimeout的那些事儿

 

纳尼,怎么不是1000毫秒呢?!!! 

我们再看看下面的代码:

<!DOCTYPE html> <head> <title>setTimeout</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> //一秒后执行setTimeout里的匿名函数,alert下 setTimeout(function(){ alert("monkey"); },1000); while(true){}; </script> </body> </html>

运行代码后!

怎么一直刷新,浏览器卡死了呢,并且没有alert!! 

按道理,即使我while无限循环,在1秒后也得alert一下啊。 

种种问题皆一个原因,JavaScript是单线程 。 

要记住JavaScript是单线程,setTimeout没有实现多线程,它背后的真相是这样滴: 

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序。 

浏览器的内核是多线程的,它们在内核控制下相互配合以保持同步,一个浏览器至少实现三个常驻线程:JavaScript引擎线程,GUI渲染线程,浏览器事件触发线程。 

*JavaScript引擎是基于事件驱动单线程执行的,JavaScript引擎一直等待着任务队列中任务的到来,然后加以处理,浏览器无论什么时候都只有一个JavaScript线程在运行JavaScript程序。 

*GUI渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种操作引发回流(Reflow)时,该线程就会执行。但需要注意,GUI渲染线程与JavaScript引擎是互斥的,当JavaScript引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JavaScript引擎空闲时立即被执行。 

*事件触发线程,当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待JavaScript引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeout、也可来自浏览器内核的其他线程如鼠标点击、Ajax异步请求等,但由于JavaScript的单线程关系所有这些事件都得排队等待JavaScript引擎处理(当线程中没有执行任何同步代码的前提下才会执行异步代码)。 

so,通过以上讲解,以上种种问题迎刃而解。 

二、setTimeout那些事儿之延迟时间为0 

当setTimeout的延迟时间为0时,大家想想它会怎么执行呢? 

例如下面的代码:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzxgs.html