理解JavaScript中worker事件api

2019-11-20 10:56:11

字體：大中小

來源：轉載

供稿：網友

如果你不是很了解Event事件，建議先這篇文章《理解javascript中DOM事件》。

首先，我們需要實例一個Worker的對象，瀏覽器會根據新創建的worker對象新開一個接口，此接口會處理客戶端與indexedDB數據庫之間的通信。這里的數據庫是指瀏覽器數據庫。如果，你需要判斷瀏覽器是否支持worker對象，詳見如下代碼。或者瀏覽器是否支持indexedDB數據庫，詳見同下，二者判斷最好選擇前者。因為IE不支持indexedDB 。

if(window.Worker){ dosomething }// Workerwindow.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; if(!window.indexedDB){ dosomething }// indexedDB

之后，worker對象會通過postMessage線程向indexedDB數據庫發送數據，當indexedDB數據庫接收到客戶端發送的數據，首先把數據的鍵值儲存并記錄到indexedDB數據庫表里面，其實相當于把數據保存在一張結構完整的表內。

于是，indexedDB數據庫會把接收到的數據值扔給新接口處理，當新接口獲得數據并解析之后，會通過postMessage扔回一條數據給數據庫，數據庫接收返回的數據處理的方式和上面一樣，此時indexedDB數據庫會把返回的數據扔給客戶端接受參數的onmessage線程，主線程后面onmessage線程主要是接收傳回的數據。

var txt1 = document.querySelector("#txt1");var txt2 = document.querySelector("#txt2");var result = document.querySelector("#result");window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; if(!window.indexedDB) {  console.log("你的瀏覽器不支持IndexedDB"); } if(window.Worker){  var _this = new Worker("../../js/build/scroll_ten1.js");  txt1.onchange = function(){    _this.postMessage([txt1.value,txt2.value]); // e = [txt1.value,txt2.value]   console.log("message post to work");  }  txt2.onchange = function(){   _this.postMessage([txt1.value,txt2.value]); // e = [txt1.value,txt2.value]   console.log("message post to work");  }  _this.onmessage = function(s){ //接收到的數據 e   result.textContent = s.data;  } }

onmessage = function(e){ //e接收Worker.postmessage傳的參數 var s = (e.data[2]*e.data[1]); var workerResult = "result : " + s; postMessage(workerResult); //Worker.onmessage進行回調workerResult參數}

想必大家看了以上的分析之后，肯定在想用Worker能做什么？對于這個問題，目前能解決線程的非阻塞問題，如何說起，當用戶改變browser的的尺寸、以及拖動瀏覽器時，主線程訪問后臺數據時，并不會中斷數據之間的進程。

支持Worker的browser有哪些？