嵌套Worker线程应用

程序员文章站 2022-07-08 07:59:08

...

一应用

1、前台JS脚本先启动一个Worker线程，该Worker线程负责收集该范围内的所有质数。

2、程序把收集到的所有质数再次提交给另外一个Worker线程统计出指定的质数。

二代码

1、calPrime.html

<!DOCTYPE html>
<html>
<head>
<metaname="author"content="Yeeku.H.Lee(CrazyIt.org)"/>
<metahttp-equiv="Content-Type"content="text/html; charset=GBK"/>
<title> 计算质数 </title>
<styletype="text/css">
#show {
 width:400px;
 background-color:#ddd;
 border-collapse: collapse;
}
 td {
 border:1px solid #555;
}
</style>
</head>
<body>
 起始值：<inputtype="text"id="start"name="start"/><br/>
 结束值：<inputtype="text"id="end"name="end"/><br/>
 个数：<inputtype="text"id="count"name="count"/><br/>
<inputtype="button"value="计算"onclick="cal();"/>
<tableid="show"></table>
<scripttype="text/javascript">
var cal =function()
{
// 得到用户输入的start、end两个值
var start = parseInt(document.getElementById("start").value);
var end = parseInt(document.getElementById("end").value);
var count = parseInt(document.getElementById("count").value);
// 如果start大于、等于end，直接结束该函数
if(start >= end)
{
return;
}
var cal =newWorker("worker.js");
// 定义需要提交给Worker线程的数据
var data ={
 start : start,
 end : end,
 count : count
};
// 向Worker线程提交数据。
 cal.postMessage(JSON.stringify(data));
 cal.onmessage =function(event)
{
var table = document.getElementById("show");
// 清空该表格原有的内容
 table.innerHTML ="";
// 获取Worker线程返回的数据
var result = event.data;
var nums = result.split(",");
// 定义表格总共包含多少列
var COLS_NUM =7;
for(var i =0; i <=(nums.length -1)/ COLS_NUM ; i++)
{
// 添加表格行
var row = table.insertRow(i);
// 循环插入7个单元格
for(var j =0; j < COLS_NUM &&
 i * COLS_NUM + j < nums.length -1; j++)
{
// 插入单元格、并为单元格设置innerHTML属性
 row.insertCell(j).innerHTML = nums[i * COLS_NUM + j]
}
}
}
};
</script>
</body>
</html>

2、worker.js

onmessage =function(event)
{
// 将数据提取出来。
var data = JSON.parse(event.data);
// 取出start参数
var start = data.start;
// 取出end参数
var end = data.end;
// 取出count参数
var count = data.count;
var result ="";
 search:
for(var n = start ; n <= end ; n++)
{
for(var i =2; i <=Math.sqrt(n); i ++)
{
// 如果除以n的余数为0，开始判断下一个数字。
if(n % i ==0)
{
continue search;
}
}
// 搜集找到的质数
 result +=(n +",");
}
// 再次启动Worker线程
var sub =newWorker("subworker.js");
// 把需要处理的数据传入启动的Worker线程中
 sub.postMessage({result: result , count : count});
 sub.onmessage =function(event)
{
// 发送消息，将会触发前台JavaScript脚本中
// Worker对象的onmessage方法
 postMessage(event.data);
}
}

3、subworker.js

onmessage =function(event)
{
// 将数据提取出来。
var data = event.data;
// 提取所有质数
var primeNums = data.result.split(",")
var randResult ="";
for(var i =0; i < data.count ; i++)
{
// 计算一个随机索引值
var randIndex =Math.floor(Math.random()
*(primeNums.length -1));
// 随机地"收集"一个质数
 randResult +=(primeNums[randIndex]+",");
}
// 发送消息，将会触发启动它的JavaScript脚本中
// 对应Worker对象的onmessage方法
 postMessage(randResult);
}

三运行结果