Web Worker API

Web Worker ແມ່ນ JavaScript ທີ່ດຳເນີນງານໃນຫຼັງເບື້ອງ ແລະ ເປັນໄອຍະການອິດສະຫຼະບັນນາທິດ.

ສິ່ງທີ່ແມ່ນ Web Worker?

ເມື່ອດຳເນີນສັນຍາ JavaScript ໃນເວັບ HTML, ເວັບໄຊຈະບໍ່ມີຄວາມຄິດຮູ້ຈົນກວ່າສັນຍາສຳເລັດ.

Web Worker ແມ່ນ JavaScript ທີ່ດຳເນີນງານໃນຫຼັງເບື້ອງ ແລະ ເປັນໄອຍະການອິດສະຫຼະບັນນາທິດ ຈະບໍ່ມີຜົນກະທົບຕໍ່ຄວາມສະຖານະພາບບັນນາທິດ. ທ່ານສາມາດດຳເນີນການທີ່ທ່ານຕ້ອງການ: ການຄົ້ນຫາ, ການເລືອກຂໍ້ມູນ, ແລະ ບັນນາທິດ web worker ຈະດຳເນີນງານໃນຫຼັງເບື້ອງ.

ການສະໜັບສະໜຸນບັບສາຍ

ຈຳນວນທີ່ຢູ່ໃນຕາລະບົດສະແດງວ່າບັນນາທິດບັບສາຍທີ່ສະໜັບສະໜຸນ Web Workers ຄັ້ງທຳອິດ:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
2010 ປີ 1 ຕູລີ 2012 ປີ 9 ຕູລີ 2009 ປີ 6 ຕູລີ 2009 ປີ 6 ຕູລີ 2011 ປີ 6 ຕູລີ

ບັນນາທິດ Web Worker ພາບຄື

ບົດສະຫຼຸບທີ່ລຽງລະບຸວ່າບັນນາທິດ Web Worker ສະຫຼາດທີ່ສະໜັບສະໜຸນຈະສ້າງບັນນາທິດ Web Worker ທີ່ດຳເນີນງານໃນຫຼັງເບື້ອງ:

ຄວາມຄິດທີ່ຕັ້ງຂຶ້ນ

ການນັບຄັນ

ທ່ານພະຍາຍາມເອງ

ກວດກາ Web Worker ບັບສາຍ

ກ່ອນທີ່ຈະສ້າງ web worker ກະລຸນາກວດກາວ່າບັນນາທິດບັບສາຍຂອງຜູ້ຄົນມີການສະໜັບສະໜຸນ Web Worker ຫຼືບໍ່

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
  // Some code.....
}
  // Sorry! No Web Worker support..
}

ສ້າງບັນນາທິດ Web Worker

ປັດຈຸບັນ, ພວກເຮົາຈະສ້າງ Web Worker ຂອງພວກເຮົາໃນ JavaScript ທີ່ນອກ.

ຢູ່ທີ່ນັ້ນ, ພວກເຮົາສ້າງວິດີໂອທີ່ສຳຄັນ. ວິດີໂອນັ້ນຖືກບັນທຶກໃນ ວິດີໂອ "demo_workers.js".

let i = 0;
function timedCount() {
  i ++;
  postMessage(i);
  setTimeout("timedCount()",500);
}
timedCount();

ສ່ວນຫຼັກຂອງວິດີໂອທີ່ຖືກກ່າວຫາຢູ່ນັ້ນແມ່ນ: postMessage() ວິທີ - ສຳຫຼັບການສົ່ງຂໍ້ຄວາມກັບ HTML ຂອງພວກເຮົາ.

ຄວາມອ້າງ:ວິດີໂອ web worker ບໍ່ຖືກໃຊ້ໃນການຫລັງການຫຼັງການຄົງຄວາມນັ້ນ, ແຕ່ພົວພັນໃນການຫຼັງການຄວາມຄວາມນິວຄາດ.

ສ້າງວິດີໂອ Web Worker

ປັດຈຸບັນພວກເຮົາມີວິດີໂອ web worker, ພວກເຮົາຕ້ອງເອິ້ນມັນຈາກ HTML ຂອງພວກເຮົາ.

ວິດີໂອທີ່ຖືກກວດສອບຢູ່ນັ້ນກໍາລັງກວດສອບວ່າ worker ໄດ້ມີຢູ່ຫລືບໍ່, ຖ້າບໍ່ມີມັນຈະສ້າງວິດີໂອ web worker ຂື້ນແລະເລີ່ມການເຮັດວຽກທີ່ຢູ່ໃນ "demo_workers.js".

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

ຫລັງຈາກນັ້ນ, ພວກເຮົາສາມາດສົ່ງ ແລະ ຮັບຂໍ້ຄວາມຈາກ web worker.

ສະເໜີການຕິດຕາມເຫດການ "onmessage" ສຳຫຼັບ web worker.

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

ເວລາທີ່ Web Worker ສົ່ງຂໍ້ຄວາມ, ຈະດຳເນີນວິດີໂອໃນທີ່ຄົນຕິດຕາມເຫດການ. ຂໍ້ມູນຈາກ Web Worker ຖືກບັນທຶກໃນ event.data.

ຢຸດຕິ Web Worker

ເວລາທີ່ວິດີໂອ web worker ໄດ້ຖືກສ້າງ, ມັນຈະສັງເກດສຽງຂໍ້ຄວາມ(ເຖິງແມ່ນວ່າໄດ້ສຳເລັດການຫລັງການຂັບເຄື່ອງລາຍການເກັບຄືນ) ແບບຈົນກວ່າມັນຖືກຢຸດຕິ.

ເພື່ອຢຸດຕິ web worker ແລະປະລິດສົມທົບຊັບສິນ/ຄອມພິວເຕີບ, ກະລຸນາໃຊ້: terminate() ວິທີການ:

w.terminate();

ນຳໃຊ້ Web Worker ກັບຄືນ

ຖ້າເຊື່ອມປະເພດ worker ໄດ້ເປັນ undefined, ໃນເວລາທີ່ມັນຢຸດຕິການ, ເຈົ້າສາມາດນຳໃຊ້ວິດີໂອທີ່ຖືກກ່າວຫາຢູ່ລັງນັ້ນ:

w = undefined;

ວິດີໂອການວຽກງານ Web Worker ທີ່ຄົງຄວາມເສົາສະຫລຸບ

ພວກເຮົາໄດ້ເຫັນວິດີໂອການວຽກງານ Worker .js ຢູ່ບ່ອນນັ້ນ. ລາຍການວິດີໂອ HTML ຂອງພວກເຮົາຢູ່ລັງຈາກນັ້ນ:

ຄວາມຄິດທີ່ຕັ້ງຂຶ້ນ

<!DOCTYPE html>
<html>
<body>
<p>ການມັກໂຕມ: <output id="result"></output></p>
<button onclick="startWorker()">ການເລີ່ມວຽກງານ</button>
<button onclick="stopWorker()">ຢຸດການດຳເນີນການ Worker</button>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>
</body>
</html>

ທ່ານພະຍາຍາມເອງ

Web Worker ແລະ DOM

ເພາະ Web Worker ຢູ່ໃນບັນນາທິດນອກ ພວກເຂົາບໍ່ສາມາດເຂົ້າເຖິງອົງການ JavaScript ທີ່ຢູ່ໃນລາຍລະອຽດດ້ານກ້ອງໄດ້:

  • ອົງການ window
  • ອົງການ document
  • ອົງການ parent