JavaScript でのワーカー イベントの api_javascript ヒントを理解する

Event イベントについてあまり詳しくない場合は、この記事 「JavaScript での DOM イベントについて」 から始めることをお勧めします。

まず、Worker オブジェクトをインスタンス化する必要があります。ブラウザは、新しく作成された Worker オブジェクトに基づいて新しいインターフェイスを開き、クライアントと IndexedDB データベース間の通信を処理します。ここでのデータベースとはブラウザのデータベースを指します。ブラウザーがワーカー オブジェクトをサポートしているかどうかを確認する必要がある場合は、次のコードで詳細を確認してください。または、ブラウザが IndexedDB データベースをサポートしているかどうかについては、以下を参照してください。この 2 つのうちの前者を選択するのが最善です。 IEはindexedDBをサポートしていないためです。

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

その後、ワーカー オブジェクトは 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 で何ができるかを考えているはずです。この問題については、現在のところ、ユーザーがブラウザのサイズを変更したり、ブラウザをドラッグしたりすると、メインスレッドがバックグラウンドデータにアクセスすると、データ間の処理が行われなくなるという、スレッドのノンブロッキング問題が解決されています。中断される。

Worker をサポートしているブラウザは何ですか?

caniuse へのリンクを共有します。このツールを使用すると、各ブラウザーの (ハッキング) をより包括的に確認できます。

// *Worker の最初の文字は大文字にする必要があることに注意してください

// *Worker のスクリプト ディレクトリは HTML がアクセスできるディレクトリである必要があることに注意してください

上記がこの記事の全内容であり、JavaScript のワーカー イベント API についての理解を深めるのに役立つことを願っています。