嵌套Worker线程应用

缺乏、安全感 2022-05-12 00:48 110阅读 0赞

**一 应用**

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="计算"οnclick="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);
    }

**三 运行结果**

![de92df65-6882-3170-ad3c-27e271e27a8c.png][]

[de92df65-6882-3170-ad3c-27e271e27a8c.png]: /images/20220512/f56d645720b6472fbe49435eb1d42ea8.png