There is no doubt that JavaScript是沒有多線程之說的，他只能一件事一件事的做，做完一件事再做下一件事，假如你的js要花一段比較長的時間做一件事的話，那么瀏覽器將會卡頓一段時間，不對用戶的操作產生響應，這可咋辦呢？謝天謝地，HTML5為我們提供了實現(xiàn)多線程的機制，這么好的東西，想必你早就再用了，不過沒關系啊，咱們一塊兒復習一下咯！
一、Worker類
1、方法介紹
（1）構造函數(shù) new Worker(arg) :參數(shù)表示你的線程要執(zhí)行的代碼所在的js文件，例如‘myworker.js’,構造函數(shù)當然是返回一個Worker類的實例
（2）worker.postMessage(message):這個方法表示從主線程向子線程發(fā)送消息或者子線程向主線程發(fā)送消息，message一般是一個字符串，也可以將一個js對象轉成字符串發(fā)過去
（3）worker上還有一個message事件，當有人向這個worker實例發(fā)送消息時，該事件被觸發(fā)，我們可以從他的事件對象的data屬性中獲得post過來的值
可以看到Woker類的API是相當簡潔的，只有兩個最常用的方法，一個事件，下面我們來通過實際的例子看看。
//main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>main</title>
</head>
<body>
<div id="out"></div>
<input type="text" name="" id="txt">
<button id="btn">發(fā)送</button>
<script type="text/javascript">
var out = document.getElementById("out");
var btn = document.getElementById("btn");
var txt = document.getElementById("txt");
var worker = new Worker("thread1.js");
btn.addEventListener("click",function(){
var postData = txt.value;
worker.postMessage(postData);
},false);
worker.addEventListener('message',function(e){
out.innerText = e.data;
},false);
</script>
</body>
</html>
//thread1.js
onmessage = function(event){
var res = event.data+"帥氣！";
postMessage(res);
}
當我在文本框輸入“大～熊”點擊發(fā)送按鈕就會出現(xiàn)如下效果
簡單分析分析，我在主線程由thead1.js創(chuàng)建了一個Worker的實例worker，當點擊按鈕時會調用他的postMessage方法，將文本框中的內容發(fā)送到thread1.js，我們的thread1.js怎么做的呢？是這樣，他偵聽message事件，主線程發(fā)送消息過來就觸發(fā)這個事件，執(zhí)行回調函數(shù)，回調函數(shù)從事件對象取得發(fā)送來的值，然后將這個值加上“帥氣！”,然后在發(fā)送回去。主線程呢也偵聽了worker的message事件，所以有消息過去時會觸發(fā)，將消息內容顯示在div中，如此就看到了上面的效果。
或許你會將這有什么用呢？這里確實沒什么用，這里我們大可以在主線程還總完成加“帥氣！”的操作，因為他的復雜度為O(1)(哈哈，最近在學算法！)，但是假如不是做這么簡單的操作呢？這種方法的好處就是不過你的子線程做多么復雜的工作，都不會讓主線程停下來，主線程改干嘛還干嘛，等到子線程把數(shù)據處理好了他直接拿過來就好了。
陸老師將可以在子線程中在調用new Worker()創(chuàng)建新的子線程，我發(fā)現(xiàn)這樣是不可以的，會報undefined錯誤，也就是說子線程中是不能調用Worker構造函數(shù)的，一開始以為是自己錯了，后來查閱了官方文檔，發(fā)現(xiàn)也沒有相關的描述。
下面看一個在主線程調用多個子線程的例子：
//main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>main</title>
</head>
<body>
<div id="out"></div>
<input type="text" name="" id="txt">
<button id="btn">發(fā)送</button>
<script type="text/javascript">
var out = document.getElementById("out");
var btn = document.getElementById("btn");
var txt = document.getElementById("txt");
var worker1 = new Worker("thread1.js");
var worker2 = new Worker("thread2.js");
btn.addEventListener("click",function(){
var postData = txt.value;
worker1.postMessage(postData);
},false);
worker1.addEventListener('message',function(e){
worker2.postMessage(e.data);
},false);
worker2.addEventListener('message',function(e){
out.innerText = e.data;
},false);
</script>
</body>
</html>
//thread1.js
onmessage = function(event){
var res = event.data+"帥氣！";
postMessage(res);
}
//thread2.js
onmessage = function(event){
var res = event.data+"沒騙你喲！";
postMessage(res);
close();
}