Memahami petua api_javascript acara pekerja dalam JavaScript

Jika anda tidak tahu banyak tentang acara Acara, adalah disyorkan untuk memulakan dengan artikel ini "Memahami Acara DOM dalam JavaScript" .

Pertama, kita perlu membuat instantiat objek Pekerja Penyemak imbas akan membuka antara muka baharu berdasarkan objek pekerja yang baru dibuat Antara muka ini akan mengendalikan komunikasi antara klien dan pangkalan data indexedDB. Pangkalan data di sini merujuk kepada pangkalan data pelayar. Jika anda perlu menentukan sama ada penyemak imbas menyokong objek pekerja, lihat kod berikut untuk mendapatkan butiran. Atau sama ada penyemak imbas menyokong pangkalan data indexedDB, lihat perkara yang sama di bawah untuk mendapatkan butiran Lebih baik memilih yang pertama antara kedua-duanya. Kerana IE tidak menyokong indexedDB.

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

Selepas itu, objek pekerja akan menghantar data ke pangkalan data indexedDB melalui urutan postMessage Apabila pangkalan data indexedDB menerima data yang dihantar oleh klien, ia mula-mula menyimpan dan merekodkan nilai utama data ke dalam jadual pangkalan data indexedDB. Malah, ia bersamaan dengan menyimpan data dalam struktur jadual yang lengkap.

Akibatnya, pangkalan data indexedDB akan membuang nilai data yang diterima ke antara muka baharu untuk diproses Apabila antara muka baharu memperoleh data dan menghuraikannya, ia akan membuang sekeping data kembali ke pangkalan data melalui postMessage menerima data yang dikembalikan dan memprosesnya dengan cara yang sama seperti di atas , pada masa ini pangkalan data indexedDB akan membuang data yang dikembalikan ke utas onmessage klien yang menerima parameter Benang onmessage di belakang utas utama terutamanya menerima data yang dikembalikan.

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

Selepas membaca analisis di atas, anda mesti berfikir tentang apa yang boleh anda lakukan dengan Pekerja? Mengenai masalah ini, masalah tidak menyekat benang pada masa ini boleh diselesaikan Bagaimana untuk mengatakan, apabila pengguna menukar saiz penyemak imbas dan menyeret penyemak imbas, apabila utas utama mengakses data latar belakang, proses antara data tidak akan. tergendala.

Pelayar apakah yang menyokong Worker?

Kongsi pautan ke caniuse Melalui alat ini, anda boleh melihat (godam) setiap pelayar dengan lebih komprehensif.

// *Perhatikan bahawa huruf pertama Pekerja mesti menggunakan huruf besar

// *Perhatikan bahawa direktori skrip Worker mestilah direktori yang boleh diakses oleh HTML

Di atas ialah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang untuk memahami dengan lebih mendalam tentang API acara pekerja dalam JavaScript.