資料結構
網路
關係型資料庫管理系統
作業系統
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+ 閱讀量
