数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 HTML5 Web Workers 中处理错误？
假设您希望浏览器在单击网页上的某个单词时执行复杂的计算。这将需要一些时间。因此，网页将保持无响应，直到操作完成。您需要一些东西能够在不影响用户界面的情况下静默地执行所需的操作。那么，如何解决这个问题呢？
在这篇文章中，我们将讨论如何解决此类问题。
解决方案是 Web Workers。但是什么是 Web Worker 呢？让我们来看看。
什么是 Web Worker？
Web Worker 是一个包含 Javascript 代码的对象，它在网页后面运行，即在另一个与工作窗口不同的全局上下文中，独立于所有其他脚本。工作线程不会中断网页的性能，例如点击、滚动等。
创建 Web Worker 后，它会向其包含的 Javascript 代码发送消息。具体来说，它会将消息发送到该 Javascript 代码分配的事件处理程序，反之亦然。Web Worker 和主文档之间的数据通过使用 **postMessage()** 方法和 **onmessage** 属性的消息进行交换。
Web Worker 也可以使用 XMLHttpRequest 与 Web 服务器进行通信。
Web Worker 有两种类型：
**专用 Web Worker** - 专用 Worker 只能被调用它的一个脚本访问。
**共享 Web Worker** - 共享 Worker 可以被多个脚本访问。
Web Worker 的工作原理
让我们看看如何创建一个运行 Javascript 代码的简单 Web Worker：
<script> var worker = new Worker (‘ demo.js ‘) ; </script>
**postMessage()** 是一个用于从 Worker 向主文档发送消息的方法。
语法
worker.postMessage();
参数
它包含要传递给主文档的数据。
示例
const webWorker = new Worker (‘ demo.js’ ); webWorker.postMessage ( ‘ This is an example ‘ );
**onMessage** 是消息事件的一个属性，该事件在通过事件源接收消息后发生。它也可以使用 addEventListener() 方法来完成。
语法
worker.onmessage = function (event) {script}
Or
Worker.addEventListener (“message”, script);
示例
<script> const webWorker = new Worker ( ‘demo.js ‘); webWorker.onmessage = function (event) => { console.log ( ‘ this is an example’ ); }; webWorker.addEventListener ( “message”, function(e) { document.getElementById ( “ demo “).innerhtml; }; </script>
如何终止 Web Worker？
如果要停止正在执行代码的 Web Worker，可以使用 **terminate()** 方法来停止 Worker 线程。它也可以使用 **close()** 方法来完成。
**terminate()** 方法用于从主文档停止 Worker，而 **close()** 方法用于从其自身作用域停止 Worker。
语法
webWorker.terminate(); webWorker.close();
示例
const webWorker = new Worker (‘ demo.js’); webWorker.onmessage = function (event) => { document.getElementById ( ‘ demo’ ); }; webWorker.terminate();
调试错误
在 Javascript 中，当 Web Worker 操作期间发生错误时，使用 **error** 事件进行调试。
**onerror** 处理程序有三个主要属性，如下所示：
**message** - 它只通知存在错误。
**lineon** - 通知导致错误的 Worker 内部行号。
**filename** - 通知发生错误的 Worker 内部文件名。
语法
addEventListener ( ‘error’ , (event) => {});
Or
Onerror = ( event) => {} ;
示例
<script> const webWorker = new Worker ( ‘demo’ ); webWorker.postMessage (‘ this is an example of error handling ‘); webWorker.addEventListener ( “message” , function(event){ alert ( “Completed” + event.data + “of the operation”); }; webWorker.onerror = (event) => { console.log (‘ Error identified with your worker ‘ ) ; }; </script>
让我们用另一个例子来理解整个过程：
假设您想找到 10000 的阶乘，并且想要使用 Web Worker。
首先创建一个名为 demo.js 的外部 js 文件。
const number = 10000; const fact = 1; for ( let i= 1; i<= number; i++){ fact = fact * I; } console.log(fact);
现在编写 HTML 代码 -
<html> <title> Web Workers </title> <script> const webWorker = new Worker ( ‘demo.js’ ); webWorker.onmessage = function (event) { document.getElementById( “solution” ).innerhtml = event.data; }; webWorker.onerror = event => { console.log( “ error occurred while doing the operation “); }; </script> <body> <div id = “solution” ></div> </body> </html>
这里,
**event.data** 元素包含 Web Worker 发送的消息。
**注意** - Web Worker 执行的代码始终存储在单独的 Javascript 文件中。
结论
Web Worker 是 HTML5 的一项新功能。虽然它在 Web 浏览器上执行繁重的计算方面非常有用，但它也可能出现错误，因为它仍处于开发阶段。因此，在网页代码中添加错误处理是一个好主意，以便在发生此类错误时获得通知，从而可以进行调试操作。
1K+ 阅读量
