一 应用
该应用允许用户输入两个数，两个数确定一个范围，而程序代码则计算、收集这个范围的所有质数。
二 代码
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);
}
三 运行结果
相关推荐
在例子2中，展示了如何使用 Worker 线程交换数据。创建多个 Worker 线程可以处理不同的任务或者协同工作。在需要通信时，Worker 线程除了使用 `postMessage` 发送数据，还可以通过 `self.postMessage` 向自身发送...
Worker线程与主线程通过消息传递进行通信，数据通过`postMessage()`发送，`onmessage`事件接收。 **Web Worker Manager的用处** Web Worker Manager作为一个开源库，它的主要目标是简化Web Worker的创建、管理和...
1. 创建Worker脚本：这是将在Web Worker线程中运行的JavaScript代码。它通常包含独立的函数或类，不依赖于主线程的全局作用域。 2. 实例化Worker：在主线程中，通过`new Worker('worker.js')`创建一个Worker实例，...
标题 "自动将模块移动到WebWorkerWebpack加载程序" 指的是使用特定的Webpack加载器——developit-workerize-loader，来实现JavaScript模块的自动化迁移，使其能够在Web Worker线程中运行。在Web开发中，Web Worker是...
2. **数据交换**：由于安全原因，主线程和Worker线程之间的数据交换只能是`structured clone`可序列化的数据类型，如基本类型、数组、对象、Blob、ArrayBuffer等。 3. **生命周期管理**：记得在完成任务后关闭Worker...
客户端（Client）通常指的是用户在浏览器上运行的应用程序，它负责展示用户界面、处理用户交互，并与服务器进行数据交换。在这个开源库中，WorkerClient可能是用于在主线程和Web Worker之间建立通信的模块，它可能...
使用Web Worker，我们可以将计算任务放在Worker线程中执行，主线程只负责数据交换，不参与计算。例如： - 在`fibonacci.js`（Worker脚本）中定义斐波那契计算函数，并在`onmessage`事件中处理主线程发送的数据，...
通过使用RxJS的Observable和Subject，开发者可以创建一个发布/订阅模型，使得主线程和Webworker之间能方便地交换数据。Webworker可以将计算结果作为Observable的值发送回主线程，而主线程则可以通过Subject向worker...
最后，教学内容还包括了Web Worker线程的典型应用，如在主线程和子线程之间，以及子线程之间进行数据传递。学生将通过实际操作和课堂实践，学习如何有效地管理这些线程间的通信，确保数据的正确传递。 教学过程设计...
JavaScript，作为一种广泛应用于Web开发的脚本语言，一直以来都是单线程执行的，这限制了其在处理大量计算任务或长时间运行操作时的性能。然而，随着技术的发展，JavaScript已经引入了多线程功能，以应对现代Web应用...
Ajax（Asynchronous JavaScript and XML）是jQuery中的一个核心功能，用于实现页面的局部更新，无需刷新整个网页就能与服务器进行数据交换。Ajax通过XMLHttpRequest对象在后台与服务器进行通信，而前端用户界面则...
在IT行业中，Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。在处理长时间运行的任务时，如大数据处理、文件上传或...
2. **数据交换**：Web Worker与主线程间的通信是通过`postMessage()` 和 `onmessage` 事件进行的。`Concurrent.Thread.js` 提供了更高级的封装，允许你直接传递复杂的数据结构，如JSON对象，而不仅仅是简单的字符串...
2. **通信机制**：主线程和Worker线程通过`postMessage`和`onmessage`事件进行异步通信，传递数据。 3. **资源限制**：Worker线程不能访问DOM，但可以加载和解析XMLHttpRequest、JSON和其他资源。 4. **生命周期**：...
- **数据交换**：线程间的数据通信是多线程编程的关键。该库支持在主线程和工作线程之间安全地传递数据。 - **错误处理**：良好的错误处理机制是多线程编程必不可少的部分。Concurrent.Thread提供了错误捕获和处理的...
4. **使用Comlink API**：在主线程和工作线程之间，通过Comlink提供的API进行数据交换和函数调用。 5. **测试与调试**：确保在多线程环境下，代码的行为符合预期，并且性能有所提升。 通过这样的配置和使用，...
- **Worker**：支持多线程并发，并允许主线程与Worker线程之间的通信。开发者需手动创建和销毁Worker线程。 ##### 2. 容器类库 提供了一系列常用的数据结构和算法，支持对数据进行高效的增删改查操作，比如数组、...
- 如何有效地管理和协调多线程之间的数据交换和同步。 #### 三、多线程编程的基本概念 1. **线程**：线程是操作系统能够进行运算调度的最小单位，它被包含在进程之中，是进程中的实际运作单位。 2. **多线程**...
测试异步JS与线程JS Web Worker Styley 使用requestAnimationFrame ， addEventListener和performance所以检查你的浏览器兼容性。 为什么？ 虽然异步版本确实抛出了大量承诺并等待它们解决实际工作是同步的，而且 ...