Understanding worker events api_javascript tips in JavaScript

If you don’t know much about Event events, it is recommended to start with this article "Understanding DOM Events in JavaScript" .

First, we need to instantiate a Worker object. The browser will open a new interface based on the newly created worker object. This interface will handle the communication between the client and the indexedDB database. The database here refers to the browser database. If you need to determine whether the browser supports worker objects, see the following code for details. Or whether the browser supports the indexedDB database, see the same below for details. It is best to choose the former between the two. Because IE does not support indexedDB.

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

After that, the worker object will send data to the indexedDB database through the postMessage thread. When the indexedDB database receives the data sent by the client, it first stores and records the key value of the data into the indexedDB database table. In fact, it is equivalent to saving the data in A complete structure of the table.

As a result, the indexedDB database will throw the received data value to the new interface for processing. When the new interface obtains the data and parses it, it will throw a piece of data back to the database through postMessage. The database receives the returned data and processes it in the same way as above. , at this time the indexedDB database will throw the returned data to the client's onmessage thread that accepts parameters. The onmessage thread behind the main thread mainly receives the returned data.

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参数
}

After reading the above analysis, you must be thinking about what you can do with Worker? For this problem, the non-blocking problem of threads can currently be solved. How to say, when the user changes the size of the browser and drags the browser, when the main thread accesses the background data, the process between the data will not be interrupted.

What browsers support Worker?

Share a link to caniuse. Through this tool, you can see the (hacks) of each browser more comprehensively.

// *Note that the first letter of Worker must be capitalized

// *Note that the script directory of the Worker must be a directory that HTML can access

The above is the entire content of this article. I hope it will be helpful for everyone to have a deeper understanding of the worker event API in JavaScript.