与Web Worker线程交换数据应用

逃离我推掉我的手 2022-05-12 00:48 176阅读 0赞

**一 应用**

该应用允许用户输入两个数，两个数确定一个范围，而程序代码则计算、收集这个范围的所有质数。

**二 代码**

1、HTML代码

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    	<title> 计算质数 </title>
    	<style type="text/css">
    		#show {
    			width: 400px;
    			background-color: #ddd;
    			border-collapse: collapse;
    		}
    		td {
    			border: 1px solid #555;
    		}
    	</style>
    </head>
    <body>
    	起始值：<input type="text" id="start" name="start"/><br/>
    	结束值：<input type="text" id="end" name="end"/><br/>
    	<input type="button" value="计算" οnclick="cal();"/>
    	<table id="show"></table>
    	<script type="text/javascript">
    		var cal = function()
    		{
    			// 得到用户输入的start、end两个值
    			var start = parseInt(document.getElementById("start").value);
    			var end = parseInt(document.getElementById("end").value);
    			// 如果start大于、等于end，直接结束该函数
    			if (start >= end)
    			{
    				return;
    			}
    			var cal = new Worker("worker.js");
    			// 定义需要提交给Worker线程的数据
    			var data = {
    				start : start,
    				end : end
    			};
    			// 向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、JS代码

onmessage = function(event)
    {
    	// 将数据提取出来。
    	var data = JSON.parse(event.data);
    	// 取出start参数
    	var start = data.start;
    	// 取出end参数
    	var end = data.end;
    	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 + ",");
    	}
    	// 发送消息，将会触发前台JavaScript脚本中
    	// Worker对象的onmessage方法
    	postMessage(result);
    }

**三 运行结果**

![74cb9bde-1a44-3dcc-ad76-9430ccbc76ec.png][]

[74cb9bde-1a44-3dcc-ad76-9430ccbc76ec.png]: /images/20220512/28ce1e9d01f2430e86c2697cb39c3b98.png