Wenn Sie nicht viel über Ereignisereignisse wissen, wird empfohlen, mit diesem Artikel „DOM-Ereignisse in JavaScript verstehen“ zu beginnen.
Zuerst müssen wir ein Worker-Objekt instanziieren. Der Browser öffnet eine neue Schnittstelle basierend auf dem neu erstellten Worker-Objekt. Diese Schnittstelle übernimmt die Kommunikation zwischen dem Client und der indexedDB-Datenbank. Mit der Datenbank ist hier die Browser-Datenbank gemeint. Wenn Sie feststellen müssen, ob der Browser Worker-Objekte unterstützt, finden Sie Einzelheiten im folgenden Code. Oder ob der Browser die indexedDB-Datenbank unterstützt, siehe unten. Am besten wählen Sie Ersteres. Weil IE indexedDB nicht unterstützt.
if(window.Worker){ dosomething }
// Worker
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB;
if(!window.indexedDB){ dosomething }
// indexedDB
Danach sendet das Worker-Objekt Daten über den PostMessage-Thread an die indexedDB-Datenbank. Wenn die indexedDB-Datenbank die vom Client gesendeten Daten empfängt, speichert und zeichnet sie zunächst den Schlüsselwert der Daten in der indexedDB-Datenbanktabelle auf. Tatsächlich entspricht dies dem Speichern der Daten in einer vollständigen Tabellenstruktur.
Als Ergebnis sendet die indexedDB-Datenbank den empfangenen Datenwert zur Verarbeitung an die neue Schnittstelle. Wenn die neue Schnittstelle die Daten abruft und analysiert, wirft sie einen Teil der Daten über postMessage zurück empfängt die zurückgegebenen Daten und verarbeitet sie auf die gleiche Weise wie oben. Zu diesem Zeitpunkt sendet die indexedDB-Datenbank die zurückgegebenen Daten an den Onmessage-Thread, der Parameter akzeptiert. Der Onmessage-Thread hinter dem Hauptthread empfängt hauptsächlich die zurückgegebenen Daten.
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参数
}
Nachdem Sie die obige Analyse gelesen haben, müssen Sie darüber nachdenken, was Sie mit Worker machen können? In Bezug auf dieses Problem kann das Nichtblockierungsproblem von Threads derzeit gelöst werden. Wenn der Benutzer die Größe des Browsers ändert und den Browser zieht, wird der Prozess zwischen den Daten nicht ausgeführt, wenn der Hauptthread auf die Hintergrunddaten zugreift unterbrochen werden.
Welche Browser unterstützen Worker?
Teilen Sie einen Link mit caniuse. Mit diesem Tool können Sie die (Hacks) jedes Browsers umfassender sehen.
// *Beachten Sie, dass der erste Buchstabe von Worker großgeschrieben werden muss
// *Beachten Sie, dass das Worker-Skriptverzeichnis ein Verzeichnis sein muss, auf das HTML zugreifen kann
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, um ein tieferes Verständnis der Worker-Event-API in JavaScript zu erlangen.
