在多個子線程中進行數據的交互
要實現子線程與子線程之間的數據交互，大致需要如下幾個步驟:
先創建發送數據的子線程。
執行子線程中的任務，然後把要傳遞的數據發送給主線程。
在主線程接受到子線程傳回來的消息時，創建接收數據的子線程，然後把
發送數據的子線程中返回的消息傳遞給接收數據的子線程。
執行接收數據子線程中的代碼。
接下來看一個在多個子線程中進行數據交互的實例，本例與上節中
實現的效果相同，同樣是隨機生成了一個整數的數組，把數組中能被5整除的
數字以表格形式輸出，並且把輸出即能被5整除也能被2整除的數字的單元格
進行描紅處理。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var worker = new Worker("script.js");
worker.postMessage("");
// 從線程中取得計算結果
worker.onmessage = function(event) {
if(event.data!="")
{
var j; //行號
var k; //列號
var tr;
var td;
var intArray=event.data.split(";");
var table=document.getElementById("table");
for(var i=0;i<intArray.length;i )
{
j=parseInt(i/10,0);
k=i;
if(k==0) //該行不存在
{
//添加行
tr=document.createElement("tr");
tr.id="tr" j;
tr.style.backgroundColor="orange";
table.appendChild(tr);
}
else //該行已存在
{
tr=document.getElementById("tr" j);
}
//添加列
td=document.createElement("td");
tr.appendChild(td);
//設置該列內容
td.innerHTML=intArray[j*10 k];
if((intArray[j*10 k])%2==0){
//設置該列背景色
td.style.backgroundColor="red";
}
//設置該列字體顏色
td.style.color="black ";
//設置列寬
td.width="30";
}
}
};
</script>
</head>
<body>
<h1>從隨機生成的數字中抽取5的倍數並顯示示例</h1>
<table id="table">
</table>
</body>
script.js
onmessage=function(event){
var worker;
//創建發送數據的子線程
worker=new Worker("worker1.js");
worker.postMessage("");
worker.onmessage = function(event) {
//接收子線程中數據，本示例中爲創建好的隨機數組
var data=event.data;
//創建接收數據子線程
worker=new Worker("worker2.js");
//把從發送數據子線程中發回消息傳遞給接收數據的子線程
worker.postMessage(data);
worker.onmessage = function(event) {
//獲取接收數據子線程中傳回數據，本示例中爲挑選結果
var data=event.data;
//把挑選結果發送回主頁面
postMessage(data);
}
}
}
worker1.js
onmessage = function(event) {
var intArray=new Array(100);
for(var i=0;i<100;i )
intArray[i]=parseInt(Math.random()*100);
postMessage(JSON.stringify(intArray));
close();
}
worker2.js
onmessage = function(event) {
//還原整數數組
var intArray= JSON.parse(event.data);
var returnStr;
returnStr="";
for(var i=0;i<intArray.length;i )
{
//能否被5整除
if(parseInt(intArray[i])%5==0)
{
if(returnStr!="")
returnStr =";";
//將能被5整除的數字拼接成字符串
returnStr =intArray[i];
}
}
//返回拼接字符串
postMessage(returnStr);
//關閉子線程
close();
}