JavaScript: Understanding the Worker Event API

If you are not familiar with event events, it is recommended to read my previous text javascript: Understanding DOM events. Or look directly below the worker API.

First, we need to instantiate a worker object, and the browser will open a new interface based on the newly created Worker object, which 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. or whether the browser supports INDEXEDDB database, see the same, the two can judge one. Because IE does not support INDEXEDDB.

 If  //worker 
   window.indexeddb  = WINDOW.INDEXEDDB | | WINDOW.MOZINDEXEDDB | | Window.webkitindexeddb  if  (!WINDOW.INDEXEDDB) { dosomething} 
   

The worker object then sends data through the PostMessage thread to the INDEXEDDB database, and when the INDEXEDDB database receives the data sent by the client, it first stores and records the key values of the data into the INDEXEDDB database table. In fact, it is equivalent to storing the data in a fully structured table.

Therefore, the INDEXEDDB database will throw the received data values to the new interface processing, when the new interface to obtain data and parse, will be thrown back through the PostMessage data to the database, the database receives the return of the data processing in the same way as above, At this point the INDEXEDDB database throws the returned data to the OnMessage thread that the client accepts the parameters, and the main thread behind the OnMessage threads is the data that is sent back.

/* koringz.github.io**  $author  koringz*  $data  2015-12-24*  $version  0.1**/ Var txt1 = document.queryselector ("#txt1") Var txt2 = document.queryselector ("# Txt2 ") var txt3 = document.queryselector (" #txt3 ") var result =  Document.queryselector ("#result") window.indexeddb = window.indexeddb | |  window.mozindexeddb | |  window.webkitindexeddb | |  window.msindexeddb;    if (!WINDOW.INDEXEDDB)     {         console.log ("Your browser does not support INDEXEDDB");    }     if (window. Worker) {        var _this = new worker (".. /.. /js/build/scroll_ten1.js ");         txt1.onchange = function ( ) {             _this.poStmessage ([Txt1.value,txt2.value,txt2.value])  // e = [txt1.value,txt2.value]             console.log ("Message post to work")         }        txt2.onchange  = function () {            _ This.postmessage ([Txt1.value,txt2.value,txt2.value])  // e = [txt1.value,txt2.value]             console.log ("message post to  Work ")         }                 _this.onmessage = function (s) { //received data  e             result.textContent = s.data;         }    } 

OnMessage = function (e) {//e receives worker.postmessage-passed parameter var s = (e.data[2]*e.data[1]);    var workerresult = "Result:" + S; PostMessage (Workerresult); Worker.onmessage the callback Workerresult parameter}

Presumably, after looking at the above analysis, what are you going to do with the worker? For this problem, it is now possible to solve the non-blocking problem of threads, how to say that when the user changes the size of the browser and drags the browser, the main thread accesses the background data and does not interrupt the process between the data.

What are the browser that support worker?

650) this.width=650; "Style=" border-top:0px;height:224px;border-right:0px;width:705px;border-bottom:0px; border-left:0px; "Src=" http://images2015.cnblogs.com/blog/538933/201512/538933-20151224213144796-1017248260.png "Width=" height= "263"/>

Share a link caniuse, this tool you can more fully see the various browsers (hack).

* Note that the first letter of the worker must be in uppercase

* Note that the script directory of the worker must be the directory that the HTML can access

Full JS code access to GitHub

This article is from the "Kosig" blog, make sure to keep this source http://kosig.blog.51cto.com/9218084/1728032

JavaScript: Understanding the Worker Event API