与Web Worker线程交换数据应用
程序员文章站
2022-07-08 07:59:14
...
一 应用
该应用允许用户输入两个数,两个数确定一个范围,而程序代码则计算、收集这个范围的所有质数。
二 代码
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="计算" onclick="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); }
三 运行结果
上一篇: 跨文档发送JSON消息实现图书选择
下一篇: 嵌套Worker线程应用