If you're not very familiar with event events, it's a good idea to understand the DOM events in JavaScript inthis article first.
First, we need to instantiate a worker object that will open a new interface based on the newly created Worker object, which handles 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 the INDEXEDDB database, see the same, the two best to choose the former. 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 sends data to the INDEXEDDB database via a postmessage thread, and when the INDEXEDDB database receives the data sent by the client, it stores and records the key value of the data into the INDEXEDDB database table. In fact, it is equivalent to keep the data in a fully structured table.
As a result, the INDEXEDDB database throws the received data value to the new interface processing, when the new interface obtains the data and resolves, will throw back a data to the database through the PostMessage, the database receives the processing which returns the way and above, At this point, the INDEXEDDB database throws the returned data to the OnMessage thread that the client accepts parameters, and the main thread is followed by onmessage threads that receive the data back.
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 ("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]);//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.l
OG ("message post to Work");
} _this.onmessage = function (s) {//received data e result.textcontent = S.data; }
}
OnMessage = function (e) {//e receive worker.postmessage parameter
var s = (e.data[2]*e.data[1]);
var workerresult = "Result:" + S;
PostMessage (Workerresult); Worker.onmessage for callback Workerresult parameters
}
We must have looked at the above analysis, and certainly want to use the worker can do? For this problem, currently can solve the thread non-blocking problem, how to say, when the user changes the size of the browser, and drag the browser, the main thread access to the background data, does not interrupt the process between the data.
What are the browser that support the worker?
Share a link caniuse, with this tool you can see the various browsers more fully (hack).
* Note that the first letter of the worker must be in uppercase
* Note that the script directory for worker must be a directory that HTML can access
This is the whole story, and I want to help you understand the Worker event API in JavaScript.