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秒之后，才显示“计算完成”。

javascript 单线程之一,布布扣,bubuko.com