Javascript 简明教程
JavaScript - Worker API
Web Worker API
worker API 是一个 Web API，它允许我们在后台线程中运行 JavaScript 代码。每当网页在浏览器中加载时，在浏览器中加载每个 <script> 标签后，它就会变为交互式。Web Worker 允许用户与网页进行交互，而无需在浏览器中加载整个 JavaScript 代码。它增加了网页的响应时间。
Create a Web Worker File
要创建 Web Worker，你需要在外部文件中编写一个脚本，你需要在另一个文件中执行该脚本。
该文件名应具有 '.js' 扩展名。
在下面的 JavaScript 代码中，我们定义了 counter() 函数。我们在函数中使用了 setTimeout() 方法，每 1000 毫秒调用一次 counter() 函数。
代码的重要部分是 postMessage() 方法。它用于在主线程中发送数据。
function counter() {
postMessage(data); // To send data to the main thread
setTimeout("counter()", 1000);
}
counter();Check for Web Worker Support
在创建 Web Worker 之前，你应该检查浏览器是否支持该 Web Worker。可以为此使用 typeof 运算符进行检查。
if (typeof(Worker) !== "undefined") {
//"Web worker is supported by your browser!";
} else {
//"Web worker is not supported by your browser!";
}Create a Web Worker Object
在创建外部 JavaScript 文件后，你需要通过将外部 JavaScript 文件的路径作为参数传递来创建一个新的 Worker 对象，如下所示。
const workerObj = new Worker("testWorker.js");要从我们通过 postMessage() 方法发送的 worker 文件中获取消息主线程，可以使用 worker 对象上的“onmessage”事件，如下所示。
workerObj.onmessage = function(e) {
// Use the event.data
};Terminate the Execution of the Web Worker
当您开始执行 web worker 脚本时，它会继续执行，直到您终止执行为止。
您可以使用 terminate() 方法来终止 web worker 的执行，如下所示。
workerObj.terminate();Example: Complete Program of Web Worker
Filename: - index.html
在下面的代码中，我们定义了 startWorker() 和 stopWorker() 函数来启动和停止 worker 的执行。
在 startWorker() 函数中，首先，我们检查浏览器是否支持 worker。之后，我们检查 worker 的任何实例是否正在运行。如果没有，我们使用外部文件中定义的脚本创建一个新的 Worker 对象实例。
之后，我们在 worker 对象上添加了“onmessage”事件。因此，每当从外部脚本文件获取数据时，它都会打印数据并执行其他操作。
在 stopWorker() 函数中，我们使用具有 workerObj 对象的 terminate() 方法来终止 worker 的执行。
<html>
<body>
<button onclick = "startWorker()"> Start Counter </button>
<button onclick = "stopWorker()"> Stop Counter </button>
<div id = "output"></div>
<script>
let output = document.getElementById('output');
let workerObj;
function startWorker() {
if (typeof (Worker) !== "undefined") {
if (typeof workerObj === "undefined") {
workerObj = new Worker("app.js");
workerObj.onmessage = function (event) {//Getting the message from web worker
output.innerHTML += "Event data is: " + event.data + "<br>";
};
}
} else {
output.innerHTML += "Web worker is not supported by your browser.";
}
}
function stopWorker() { // To stop the web worker.
if (typeof workerObj !== "undefined") {
workerObj.terminate();
workerObj = undefined;
}
}
</script>
</body>
</html>Filename: - app.js
在下面的代码中，我们定义了 counter() 函数。在 counter() 函数中，我们使用 setTimeOut() 方法在每秒后调用 counter() 函数。它还使用 postMessage() 方法将数据发布到主线程中。
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();