html5-web workers-前后台线程交互

来源：互联网发布：投资经理知乎编辑：程序博客网时间：2024/04/29 22:31

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现前台和后台的线程数据交互</title>
<script>
var intArray=new Array();//产生一个随机数组
var intStr="";//将随机数组用字符串进行连接
//生成200个随机数
for(var i=0;i<200;i++){
intArray[i]=parseInt(Math.random()*200);
if(i!=0){
intStr+=";";//用分号作为随机数组的分隔符
}
intStr+=intArray[i];
}
//向后台线程提交随机数组
var worker=new Worker("js/test.js");
worker.postMessage(intStr);
//从线程中取得计算结果
worker.onmessage=function(event){
if(event.data!=""){
var h;//行号
var l;//列号
var tr;
var td;
var intArray=event.data.split(";");
var table=document.getElementById("table");
for(var i=0;i<intArray.length;i++){
//h=parseInt(i/15,0);
h=parseInt(i/15);
l=i%15;
//该行不存在
if(l==0){
//添加新行的判断
tr=document.createElement("tr");
tr.id="tr"+h;
table.appendChild(tr);
}
//该行已经存在的话
else{
//获取改行
tr=document.getElementById("tr"+h);
}
//添加列
td=document.createElement("td");
tr.appendChild(td);
//设置该列的数字内容
td.innerHTML=intArray[h*15+l];
//设置该列的背景色颜色
td.style.background="#f56848";
//设置给列对象的数字颜色
td.style.color="#000000";
//设置宽度
td.width="30";
}
}
};
</script>
</head>
<body>
<h2 style="text-shadow:3px 3px 6px blue;">从随机生成的数字中抽取5的倍数显示实例</h2>
<table id="table" border="" cellspacing="" cellpadding="">
</table>
</body>

</html>

//test.js

onmessage=function(event){
var data=event.data;
var returnStr;//将5的倍数组成字符串返回
var intArray=data.split(";");
returnStr="";
for(var i=0;i<intArray.length;i++){
if(parseInt(intArray[i]%5)==0){
if(returnStr!=""){
returnStr+=";";
}
returnStr+=intArray[i];
}
}
postMessage(returnStr);
};

0 0