javascript中的線程之我見

今天與一個同事爭論javascripe中間的線程機制，他爭論說javascript是有線程的，理由即使javascript中間的事件回調就是線程的實現，個人認為在javascript中是沒有線程機制的：

理由如下：

引自<<精通javascript>> john resig著：

1. <script>
2.  <!--
3.   while(!window.loaded);
4.   //some operation 
5.    window.alert();
6.  -->
7. </script>

這段代碼的意圖就是想阻塞js當前線程。知道頁面完全載入以後菜執行下面接下來的操作，即“同步”，但是得到的效果是瀏覽器暫停或者死掉，可見在js中是不能用迴圈來暫停等待的；可見早javascript中要實現這個效果必須採用回調，即：

1. wndow.onload=funcrion(){
3. //some operation
5. }

然而，回調並不是js語言中支援多線程的依據，我們知道，在windows是支援回調訊息機制的；當我們點擊了某個按鈕的時候系統會調用這個單擊事件的處理函數，我想在windows中間是這麼事件的他把一個處理函數綁定到了這個單擊事件的出發上，維護一張事件處理表，這個表中間某個空間的單擊事件對應一個處理函數的函數指標，當事件點擊的時候，會調用這個函數指標指向的函數；

 

什麼是線程，這個概念，我想我們應該從多線程的作業系統說起，多線程，就是讓多個處理過程交替執行，並且這個交替的時間片很短，短到我們人類無法感知，這就是為什麼單一處理器也可以並發執行線程，而我們在上面看到的回調說實在的，就猶如一個方法的調用，等處理器函數調用完了以後再返回原程式段繼續執行，我想這跟我們在作業系統裡面的中斷處理有很相似的

概念，我們知道，中斷處理是硬體本來就支援的，而在單一處理器的系統中，多線程是由作業系統來實現的，我多線程的作業系統下面，作業系統會認為的維護多個狀態的線程隊列，並決定採取何種輪轉演算法來切換線程之間的執行；他依靠重寫時間中斷處理器來在一個時間片的間隔裡調用進程（線程）管理器來調節線程和進程之間的轉換和執行；這就可見，類似於中斷處理功能的回調功能並不能證明線程的存在（因為從上可以清晰的看見兩者之間的關係）；

以下的例子也可以清晰的證明js的所謂“線程”：

1. <script language="javascript">
2.       <!--
3.      function main(){
4.       for(var index=0;index<10;index++){
5.       alert("main thread");
6.       setTimeout(secondary,20);
7.       }
8.      }
10.      function secondary(){
11.      alert("secondary");
12.      }
14.    main();
15.    -->
16.    </script>

由於沒有進程的概念，這裡本來應該是main和secondary交替執行的，變成了執行完main再執行secondary的貪婪調度；那按照這樣理解的話，js中間沒有線程的概念，我們如何自己來實現這個線程的機制呢，那麼，就好像，我們在中斷處理機制上面如何?線程的概念是一樣的；既然系統（js引擎）不給我們維護這個線程列表和調度，那麼我們自己來實現（調度演算法和）

 

1.   <script language="javascript">
2.       <!--
3.       var thread_one_time=0;
4.       var thread_two_time=0;
5.       function thread_one(){
6.       thread_one_time++;    
7.       alert( thread_one_time);
8.       }
10.       
11.       function thread_two(){
12.       thread_two_time++;
13.       alert( thread_two_time);
14.       }
15.       }
17.      
18.       setInterval(thread_one,100);
19.       setInterval(thread_two,100);
20.    -->
21.    </script>

在這裡，我們就可以看見兩個子程式交替執行了，其實，如果用線程的眼光看的話，這裡是有三個線程的，一個是thread_one 一個是thread_two一個是main_thread（不過已經執行完啦）別不信，不如你加修改成為這樣就可以知道啦：

1.  <script language="javascript">
2.       <!--
3.       var thread_one_time=0;
4.       var thread_two_time=0;
5.       function thread_one(){
6.       thread_one_time++;    
7.       alert( thread_one_time);
8.       }
10.       
11.       function thread_two(){
12.       thread_two_time++;
13.       alert( thread_two_time);
14.       }
16.      
17.       setInterval(thread_one,100);
18.       setInterval(thread_two,100);
20.       for(var i=0;i<10;i++){
21.        alert(i+"main");
22.       }
23.    -->
24.    </script>

 

所以這裡的主程式你可以看成是一個貪婪主線程，相當於作業系統中間的進程管理器（時間中斷處理器實現），他來調度和切換管理整個系統的線程隊列，這裡main採用的”調度演算法“很樸實，就是100秒的時間片輪轉，沒有優先順序，沒有中斷，沒有........，

=js進程實現代碼：

thread.js:

1. /**
2.  * 線程管理類
3.  * @author zxub 2006-06-12
4.  */
5. function Thread(_task,_delay,_times)
6. {
7.     this.runFlag=false;
8.     this.busyFlag=false;
9.     this.taskArgs=Array.prototype.slice.call(arguments,3);
10.     
11.     if (_times!=undefined)
12.     {
13.         this.times=_times;
14.     }
15.     else
16.     {
17.         this.times=1;
18.     }
19.     
20.     var _point=this;
21.     
22.     this.timerID=-1;
23.     
24.     this.start=function()
25.     {
26.         if (this.runFlag==false)
27.         {
28.             this.timerID=window.setInterval(_point.run,_delay);            
29.             this.runFlag=true;
30.         }
31.     }
32.     
33.     this.run=function()
34.     {
35.         if (_point.busyFlag) return;
36.         if (_point.times==-1)//無限迴圈
37.         {
38.             _task(_point.taskArgs);
39.         }
40.         else if (_point.times>0)
41.         {
42.             _task(_point.taskArgs);
43.             _point.times-=1;
44.             if (_point.times==0)
45.             {
46.                 window.clearInterval(this.timerID);
47.             }                                  
48.         }        
49.     }
50.     
51.     this.sleep=function()
52.     {
53.         this.busyFlag=true;
54.     }
55.     
56.     this.resume=function()
57.     {
58.         this.busyFlag=false;
59.     }
60.     
61.     this.abort=function()
62.     {        
63.         window.clearInterval(this.timerID);        
64.     }
65. }

thread.html:

1. <html>
2. <head>
3. <title>測試</title>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <script type="text/javascript" src="thread.js"></script>    
6. <style type="text/css">
7. <!--
8. body,tr,td { font-size: 12px;}
9. -->
10. </style>
11. </head>
12. <body>
13. <script>
14. var func=function(_o)
15. {
16.     document.getElementById(_o).innerHTML=parseInt(document.getElementById(_o).innerHTML)+1;
17. }
18. var t1=new Thread(func,50,121,"t1");
19. var t2=new Thread(func,200,20,"t2");
20. </script>
21. <input type="button" value="start1" onclick='t1.start();'></input>
22. <input type="button" value="sleep1" onclick='t1.sleep();'></input>
23. <input type="button" value="resume1" onclick='t1.resume();'></input>
24. <input type="button" value="abort1" onclick='t1.abort();'></input>
25. <input type="button" value="start2" onclick='t2.start();'></input>
26. <input type="button" value="sleep2" onclick='t2.sleep();'></input>
27. <input type="button" value="resume2" onclick='t2.resume();'></input>
28. <input type="button" value="abort2" onclick='t2.abort();'></input>
29. <div id="t1">0</div> | <div id="t2">0</div>
30. <input type="button" value="t1.timerID" onclick='alert(t1.timerID);'></input>
31. <input type="button" value="t2.timerID" onclick='alert(t2.timerID);'></input>
32. </body>
33. </html>

我最先接觸線程就是來自於作業系統，由於js這門語言的特殊性，有人說是玩具語言的不嚴謹，有人說是靈活，褒貶不一，所以把自己對js線程的一些看法結合操作體統解釋一下，不敢保證對，也不敢保證表達的就是自己的意思，技術這玩意，有很多時候語言表達不了自己的認識，體會深了，就模模糊糊的認識到啦，要想做到表達給別人，還得功力加深，對於js我一直都是很迷茫的，閉包，面對對象，初始化，有很多地方值得大家探討，希望能向各位學習；（轉自請註明出處，csdn corey）