一 应用
1、第一条Worker线程负责收集指定范围内的质数。
2、第二条Worker线程负责从指定范围的质数中随机抽取指定数量的质量。
二 代码
1、calPrime.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="text" id="count" name="count"/><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);
var count = parseInt(document.getElementById("count").value);
// 如果start大于、等于end，直接结束该函数
if (start >= end)
{
return;
}
// 启动第一个Worker线程，该线程用于计算、收集指定范围内的所有质数
var cal = new Worker("worker1.js");
// 定义需要提交给Worker线程的数据
var data = {
start : start,
end : end
};
// 向Worker线程提交数据。
cal.postMessage(JSON.stringify(data));
// 监听onmessage方法，获取worker1.js对应的的Worker线程返回的数据
cal.onmessage = function(event)
{
// 启动第二个Worker线程，该线程用于随机抽取count个质数
var rand = new Worker("worker2.js");
rand.postMessage({result: event.data , count : count});
// 监听onmessage方法，获取worker2.js对应的的Worker线程返回的数据
rand.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、worker1.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 + ",");
}
// 把需要处理的数据传入启动该Worker线程的宿主脚本中
postMessage(result);
}
3、worker2.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);
}
三 运行结果
相关推荐
这里我们主要讨论如何在Qt子线程中处理数据并将其安全地发送到主线程，以便在QTableWidget中显示。 首先，我们要明白Qt的线程模型。主线程通常负责处理GUI事件，而子线程则可以执行计算密集型任务。在多线程环境中...
本文将深入探讨QT多线程编程的核心概念，主线程与子线程之间的数据交互以及如何在VS2017中进行实际应用。 首先，理解QT中的线程模型至关重要。在QT中，主线程通常负责用户界面的更新和事件处理，而子线程则可以执行...
子线程与主线程之间的通信方式有很多种，如使用共享变量、wait/notify机制、Future和Callable接口等。而观察者模式（Observer Pattern）则是一种设计模式，它允许一个对象的状态变化自动通知其他依赖该对象的对象。...
这篇文章主要介绍了Javascript Worker子线程代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 main.js code: //创建 var worker = new Worker("./...
为了解决这个问题，我们需要使用特定的方法，如`Control.Invoke`或`Control.BeginInvoke`，它们允许子线程安全地调用主线程中的方法。 2. 委托的概念与作用： 委托在C#中是一种类型，它代表了一组具有相同签名的...
在 WebGL 地图引擎中，Web Worker 的应用尤为重要，因为它可以有效地处理地图数据，提高渲染性能。 Web Worker 的基本使用方法如下： 1. 主线程创建 Worker 实例：通过 `new Worker('worker.js')` 创建一个新的 ...
QT框架是C++中广泛使用的跨平台应用开发库，它提供了丰富的功能，包括GUI、网络、数据库连接等。在QT中，线程是处理并发任务的重要机制，而定时器是控制程序执行间隔的关键工具。本篇文章将深入探讨如何在QT的子线程...
用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/125300644
Worker线程与主线程之间的通信通过消息传递机制实现，使用`postMessage`发送数据，`onmessage`事件监听接收。 三、tiny-worker的使用方法 1. 引入tiny-worker库：首先，你需要将tiny-worker库引入到你的项目中。...
在使用Qt进行应用程序开发时，有时我们可能会遇到主线程因为执行耗时的循环操作而使得用户界面(UI)无响应，这种现象通常被称为“界面假死”或“UI冻结”。为了解决这个问题，我们可以利用Qt提供的多线程机制，将耗时...
由于Worker线程和主线程之间的通信是通过消息传递，所以可以确保UI更新和计算任务同时进行，提升了应用的性能表现。 6. **detect.worker.ts**：这个文件可能是Worker线程中的具体实现，用于运行Face-API.js的面部...
在这个开源库中，WorkerClient可能是用于在主线程和Web Worker之间建立通信的模块，它可能包含了消息传递、错误处理等功能，使得开发者能方便地在主线程和Worker之间共享数据和执行任务。 服务器（Server）则是后端...
主线程和Worker线程之间的通信通过`postMessage()`和`onmessage`事件来实现。主线程使用`postMessage()`发送消息到Worker，而Worker则通过监听`onmessage`事件接收消息。 3. **错误处理** 每个Worker都有一个`on...
`postMessage()`用于在工作线程和主线程之间传递数据，而`onMessage()`则用于在主线程中监听来自工作线程的消息。这样，你可以将计算结果或者进度更新从工作线程发送到主线程，反之亦然。 不过，需要注意的是，`...
4. **通信优化**：封装消息传递过程，简化与Worker之间的数据交换。 5. **版本控制**：支持Worker代码的热更新，无需重新加载整个页面。 **使用Web Worker Manager** 在实际项目中，开发者可以按照以下步骤使用Web...
2. **通信机制**: 主线程和Worker之间通过`postMessage()`方法发送消息，以及`onmessage`事件监听接收消息。`postMessage()`用于向Worker发送数据，而Worker通过`self.postMessage()`向主线程发送数据。 ```...
1. **消息传递**：由于Web Worker和主线程之间无法直接共享内存，WorkerDOM通过MessageChannel在主线程和Web Worker之间传递DOM操作的指令。主线程接收到用户交互后，将操作序列化为消息发送给Worker，Worker执行...
- 数据交换：由于主线程和Worker之间的通信是基于消息传递的，我们需要确保传递的数据结构能被JSON序列化和反序列化。 - 共享内存：Web Worker不能访问主线程的DOM，也不能直接共享内存对象，但可以通过`...
2. **消息传递**：主线程和Worker线程之间的通信主要依赖于消息传递。你可以使用Worker对象的`postMessage()`方法向Worker发送数据，而Worker则通过`addEventListener(MessageEvent.MESSAGE, messageHandler)`监听并...