在多个子线程中进行数据的交互
要实现子线程与子线程之间的数据交互,大致需要如下几个步骤:
先创建发送数据的子线程。
执行子线程中的任务,然后把要传递的数据发送给主线程。
在主线程接受到子线程传回来的消息时,创建接收数据的子线程,然后把
发送数据的子线程中返回的消息传递给接收数据的子线程。
执行接收数据子线程中的代码。
接下来看一个在多个子线程中进行数据交互的实例,本例与上节中
实现的效果相同,同样是随机生成了一个整数的数组,把数组中能被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%10;
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();
}