Hindi ko alam ang salin para sa 'Web Worker API' sa Filipino

Ang Web Worker ay nangangalakal sa likod na JavaScript, na hindi makakaapekto sa pagganap ng pahina.

Ano ang Web Worker?

Ang pahina ay walang tugon habang isinasagawa ang script sa pahina ng HTML.

Ang Web Worker ay nangangalakal sa likod na JavaScript, na malayong sa ibang script, at hindi makakaapekto sa pagganap ng pahina. Maaari ka ng magpatuloy sa anumang bagay na gusto mo gawin: mag-click, piliin ang nilalaman, at ibang bagay pa, habang ang web worker ay tumatakbo sa likod.

Suporta ng browser

Ang bilang sa talahanayan ay naglalarawan ng unang bersyon ng browser na ganap na sumusuporta sa Web Workers:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
Enero 2010 Setyembre 2012 Hunyo 2009 Hunyo 2009 Hunyo 2011

Web Worker instance

Ang halimbawa na ito ay nagbuhat ng isang simple na Web Worker, na gumagawa ng kalkulasyon sa likod:

Halimbawa

Tally:

亲自试一试

Suriin ang Web Worker browser

Bago mo magbuhat ng web worker, suriin mo kung ang browser ng user ay sumusuporta sa iyon:

if (typeof(Worker) !== "undefined") {
  // Oo! May suporta ng Web worker!
  // Ilang code.....
else {
  // Paalam! Walang suporta ng Web Worker...
}

Buhat ng Web Worker file

Ngayon, magbibigay-tugon tayo sa Web Worker namin sa labas na JavaScript.

Dito, gumawa naming ng isang mahalagang script. Ang script na ito ay naka-store sa "demo_workers.js" na file:

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

Ang mahalagang bahagi ng sumusunod na code ay: postMessage() Paraan - Para sa pagpapadala ng mensahe pabalik sa HTML na pahina.

Komento:Hindi ginagamit ang web worker sa ganitong simple na script, kundi sa CPU-intensive na mga gawain.

Gumawa ng Web Worker object

Tatlong magagamit na paraan sa paggawa ng Web Worker object

Mayroon namin ng web worker na file, kailangan naming tumawag dito mula sa HTML na pahina.

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

Ang sumusunod na code ay nagtitingnan kung mayroon na ang worker, kung wala, ito ay maglikha ng bagong object ng web worker at magpapatok ng code mula sa "demo_workers.js":

Pagkatapos, maaari naming magpadala at magtanggap ng mensahe mula sa web worker.

Magdagdag ng isang "onmessage" na event listener sa web worker.
  document.getElementById("result").innerHTML = event.data;
};

Pagkatapos ipablis ng Web Worker ang mensahe, gagawin ang code sa event listener. Ang data mula sa Web Worker ay naka-store sa event.data.

Tapusin ang Web Worker

Pagkatapos itong web worker na object ay nilikha, ito ay magpatuloy sa pagpapakita ng mensahe (kahit nang tapos na ang external script) hanggang ito ay napapatapos.

Upang tapusin ang web worker at malaya ang ressource ng browser/kompyuter, gamitin ang: terminate() Paraan:

w.terminate();

Muling Gamitin ang Web Worker

Kung ipapakilala ang variable ng worker bilang undefined, maaari mong gamitin ang sumusunod na code pag tapos itong tinapos:

w = undefined;

Kabuuan na Halimbawa ng Web Worker

Nakita namin ang code ng Worker sa .js na file. Ito ang code ng HTML na pahina:

Halimbawa

<!DOCTYPE html>
<html>
<body>
<p>Titik ang bilang: <output id="result"></output></p>
<button onclick="startWorker()">Simula Ang Worker</button>
<button onclick="stopWorker()">Stop 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 对象