线程嵌套 -HTML5 Web Workers

最新推荐文章于 2025-05-04 07:49:02 发布

原创最新推荐文章于 2025-05-04 07:49:02 发布 · 373 阅读

0 ·

CC 4.0 BY-SA版权

编程开发专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种在多个子线程中进行数据交互的方法，通过创建发送数据和接收数据的子线程，实现了主线程与子线程及子线程间的通信。以随机生成整数数组为例，演示了如何筛选并输出特定条件下的数值。

在多个子线程中进行数据的交互

要实现子线程与子线程之间的数据交互，大致需要如下几个步骤:

先创建发送数据的子线程。
执行子线程中的任务，然后把要传递的数据发送给主线程。
在主线程接受到子线程传回来的消息时，创建接收数据的子线程，然后把
发送数据的子线程中返回的消息传递给接收数据的子线程。
执行接收数据子线程中的代码。

接下来看一个在多个子线程中进行数据交互的实例，本例与上节中
实现的效果相同，同样是随机生成了一个整数的数组，把数组中能被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();                         
}