JavaScript多線程，在HTML5 WebWork沒出現之前很多人都是用ConcurrentThread.js模擬多線程。
通常，我們也會用setInterval和setTimeout來模擬多線程。
多線程的概念介紹
瀏覽器事件觸發線程，ajax，setTimeout，setInterval都會被放入最后面的一個程序池。
Concurrent.Thread.js
Concurrent.Thread.js是一個日本人開發的，用來讓javascript也進行多線程開發的包，可以讓我們將耗時的任務利用前端來模擬多線程。
下載地址：http://download.csdn.net/download/include_define/796952
教程文檔：http://www.cnblogs.com/0banana0/archive/2011/06/01/2067402.html
下面我們試一下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>JavaScript多線程</title> 7 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 8 <script type="text/javascript" src="Concurrent.Thread.js"></script> 9 <style type="text/css"> 10 div { 11 width: 100px; 12 height: 100px; 13 cursor: pointer; 14 background: orange; 15 } 16 </style> 17 </head> 18 19 <body> 20 <div id="test"> 21 測試點擊 22 </div> 23 <script type="text/javascript"> 24 Concurrent.Thread.create(function() { 25 $('#test').click(function() { 26 alert(1); 27 }); 28 /*下面有一段特別復雜的函數*/ 29 for (var i = 0; i < 10000; i++) { 30 console.log(i); 31 } 32 }); 33 </script> 34 </body> 35 36 </html>
可以發現，div能在打印i的時候正常響應了，非常牛掰的一個庫~~
WebWork
WebWork 是運行在后台的 JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在后台運行。
注意：dom是不能被異步操作的! WebWork不能在本地使用
HTML5之WebWork使用方法：http://www.cnblogs.com/yxlblogs/p/3896786.html
webwork.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript多線程</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> div { width: 100px; height: 100px; cursor: pointer; background: orange; } </style> </head> <body> <div id="test"> 測試點擊 </div> <script type="text/javascript"> $('#test').click(function() { alert(1); }); var worker = new Worker("task.js"); worker.onmessage = function(event) { // 消息文本放置在data屬性中， // oBox.innerHTML = event.data; alert(event.data); } worker.postMessage(500000); </script> </body> </html>
task.js
onmessage = function(event) { var num = event.data; var result = 0; for (var i = 0; i < num; i++) { result += i; console.log(result); } // 向線程創建源送回消息 postMessage(result); }