వెబ్ వర్కర్ ఏపీఐ

వెబ్ వర్కర్ బ్యాక్గ్రౌండ్ లో నడిచే జావాస్క్రిప్ట్, పేజీ పరిమాణాన్ని ప్రభావితం చేయదు.

వెబ్ వర్కర్ ఏమిటి?

వెబ్ పేజీలో స్క్రిప్ట్ను నిర్వహించడం సమయంలో పేజీ అనిపించని ఉంటుంది.

వెబ్ వర్కర్ బ్యాక్గ్రౌండ్ లో నడిచే జావాస్క్రిప్ట్, ఇతర స్క్రిప్ట్స్ నుండి స్వతంత్రంగా ఉంటుంది, పేజీ పరిమాణాన్ని ప్రభావితం చేయదు. మీరు ఏదైనా చేయగలరు: క్లిక్ చేయండి, విషయాన్ని ఎంచుకొండి మొదలు, అంతేకాకుండా, వెబ్ వర్కర్ బ్యాక్గ్రౌండ్ లో నడిచుతుంది.

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు పూర్తిగా వెబ్ వర్కర్స్ మద్దతు ఇస్తున్న మొదటి బ్రౌజర్ వెర్షన్స్ నిర్దేశిస్తాయి:

చ్రోమ్ ఐఈ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
చ్రోమ్ 4 ఐఈ 10 ఫైర్ఫాక్స్ 3.5 సఫారీ 4 ఓపెరా 11.5
2010 జనవరి 2012 సెప్టెంబర్ 2009 జూన్ 2009 జూన్ 2011 జూన్

వెబ్ వర్కర్ ఇన్స్టాన్స్

ఈ ఉదాహరణలో, ఒక సాధారణ వెబ్ వర్కర్ సృష్టించబడింది, ఇది బ్యాక్గ్రౌండ్ లో సంఖ్యలను లెక్కిస్తుంది:

ఉదాహరణ

లెక్కింపు:

స్వయంగా ప్రయత్నించండి

వెబ్ వర్కర్ బ్రౌజర్ తనిఖీ

వెబ్ వర్కర్ సృష్టించడానికి ముందు, వారి బ్రౌజర్ ఇది మద్దతు ఇస్తుందా తనిఖీ చేయండి:

if (typeof(Worker) !== "undefined") {
  // అవును! వెబ్ వర్కర్ మద్దతు!
  // కొన్ని కోడ్.....
}
  // క్షమించండి! వెబ్ వర్కర్ మద్దతు లేదు..
}

వెబ్ వర్కర్ ఫైల్ సృష్టించండి

现在，让我们在外部 JavaScript 中创建我们的 Web Worker。

ఇక్కడ, మేము ఒక ముఖ్యమైన స్క్రిప్ట్ సృష్టిస్తున్నాము. దానిని "demo_workers.js" ఫైల్లో నిల్వ చేయబడుతుంది:

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

పై కోడ్ లో ముఖ్యమైన భాగం ఇక్కడ ఉంది: postMessage() పద్ధతి - హెచ్ఎంఎల్ పేజీకి సందేశాన్ని పంపడానికి ఉపయోగించబడుతుంది.

మున్నడికి వచ్చిన ఉదాహరణ:సాధారణంగా వెబ్ వర్కర్ ఈ రకమైన సాధారణ స్క్రిప్ట్లకు ఉపయోగించబడదు, బదులుగా సిపియు కార్యక్రమాలకు ఉపయోగించబడుతుంది.

వెబ్ వర్కర్ వస్తువును సృష్టించండి

ఇప్పుడు మేము వెబ్ వర్కర్ ఫైల్ని కలిగి ఉన్నాము, కాబట్టి మేము హెచ్ఎంఎల్ పేజీ నుండి దానిని కాల్ చేయాలి.

క్రింది కోడ్ వరుసలు వర్కర్ ను చూసుకుని ఉన్నాయి, ఉన్నాయి లేకపోయినట్లయితే, కొత్త వెబ్ వర్కర్ వస్తువును సృష్టించి "demo_workers.js" లో ఉన్న కోడ్ ని నడుపుతుంది:

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

కంటికి కంటే ముందు మేము వెబ్ వర్కర్ నుండి సందేశాలను పంపి అందుకోవచ్చు.

వెబ్ వర్కర్ కు "onmessage" ఇవెంట్ లిస్టెనర్ జోడించండి.

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

వెబ్ వర్కర్ విషయాన్ని ప్రకటించినప్పుడు, అది ఇవ్వబడిన ఇవెంట్ లిస్టెనర్లో కోడ్ నిర్వహించబడుతుంది. వెబ్ వర్కర్ నుండి డాటా ఇవెంట్.డాటా లో నిల్వ చేయబడుతుంది.

వెబ్ వర్కర్ అంతర్ముఖంగా ముగించండి

వెబ్ వర్కర్ వస్తువు సృష్టించబడినప్పుడు, అది అంతర్ముఖంగా ముగించబడకుండా విషయాలను వినికికి కొనసాగుతుంది (బాహ్య స్క్రిప్ట్ పూర్తి అయినప్పటికీ) వరకు మరియు అంతర్ముఖంగా ముగించబడకుండా విషయాలను వినికికి కొనసాగుతుంది.

వెబ్ వర్కర్ ని అంతర్ముఖంగా ముగించడానికి మరియు బ్రౌజర్/కంప్యూటర్ వనరులను వదిలించడానికి క్రింది కోడ్ ను ఉపయోగించండి: terminate() పద్ధతి:

w.terminate();

వెబ్ వర్కర్ పునర్వినియోగం

వర్కర్ వ్యవచ్చినప్పుడు అది undefined గా సెట్ చేస్తే, మీరు క్రింది కోడ్ ను మళ్ళీ ఉపయోగించవచ్చు:

w = undefined;

పూర్తి వెబ్ వర్కర్ ఉదాహరణ కోడ్

మేము .js ఫైల్లో వర్కర్ కోడ్ చూసాము. కంటికి కంటే ముందు హెచ్ఎంఎల్ పేజీ కోడ్ ఇక్కడ ఉంది:

ఉదాహరణ

<!DOCTYPE html>
<html>
<body>
<p>సంఖ్యలను లెక్కించండి: <output id="result"></output></p>
<button onclick="startWorker()">స్టార్ట్ వర్కర్</button>
<button onclick="stopWorker()">స్టాప్ వర్కర్</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>

స్వయంగా ప్రయత్నించండి

వెబ్ వర్కర్ మరియు DOM

వెబ్ వర్కర్ వెలుపలి ఫైల్లో ఉండినందున, వారు క్రింది జావాస్క్రిప్ట్ ఆబ్జెక్ట్లను ప్రాప్యం చేయలేరు:

  • విండో ఆబ్జెక్ట్
  • డాక్యుమెంట్ ఆబ్జెక్ట్
  • ప్యారెంట్ ఆబ్జెక్ట్