首页 > 代码库 > javascript 单线程之一

javascript 单线程之一

初次接触到javascript的单线程。

 1     <button id="do">计算器</button>
 2     <div id="status"></div>
 3 
 4     <script type="text/javascript">
 5         var $=function(id){
 6             return document.getElementById(id);
 7         };
 8 
 9         $(‘do‘).onclick=function(){
10             $(‘status‘).innerHTML="正在计算.........."; //这里根本就没有去做 ??
11             long();
12         };
13 
14         var long=function(){
15             var  result=0;
16             for(var i=0; i< 1000; i++){
17                 for(var j=0; j<1000; j++){
18                     for(var k=0; k<1000; k++){
19                         result+=i+j+k;
20                     }
21                 }
22             }
23             $(‘status‘).innerHTML=‘计算完成‘;
24         };
25 
26 
27     </script>

测试结果是:正在计算这几个字根本就没显示,直接显示计算完成。

后来分析原因,当点击事件发生时,浏览器事件触发线程 向Event Loop 中添加了点击事件,javascript引擎线程 在处理完点击事件后,继续执行下边的

long()函数,直到 javascript引擎线程 执行完函数后,界面渲染线程 才有机会执行界面重绘,结果就是N秒之后,才显示“计算完成”。