HTML Web Workers API

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯

Web Worker คืออะไร?

เมื่อดำเนินการสคริปต์ในหน้า HTML หน้าเพจจะไม่ตอบสนองจนกว่าสคริปต์จะเสร็จสิ้น

Web Worker คือ JavaScript ที่ทำงานอยู่เบื้องหลัง โดยไม่ขึ้นกับสคริปต์อื่นๆ โดยไม่ส่งผลกระทบต่อประสิทธิภาพของเพจ คุณสามารถทำสิ่งที่คุณต้องการต่อไป: การคลิก เลือกสิ่งต่างๆ ฯลฯ ในขณะที่ Web Worker ทำงานอยู่เบื้องหลัง

การสนับสนุนเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับ Web Workers อย่างเต็มรูปแบบ

APIChromeEdgeFirefoxSafariOpera
Web Workers4.010.03.54.011.5

ตัวอย่าง HTML Web Worker

ตัวอย่างด้านล่างสร้าง Web Worker อย่างง่ายที่นับตัวเลขในพื้นหลัง:

ตัวอย่าง

นับเลข:




หมายเหตุ: Internet Explorer 9 และเวอร์ชันก่อนหน้าไม่รองรับ Web Workers

ลองดูสิ ❱

ในกรณีที่คุณลองใส่ Code ตามนี้แล้วยังไม่แสดงผลการนับเลข นั่นเป็นเพราะคุณยังไม่มีไฟล์ demo_workers.js ให้ทำการสร้างไฟล์ในโฟลเดอร์ที่มีข้อมูลแสดงผลของเว็บไซต์ เช่น httpdocs / public_html เป็นต้น โดยสามารถนำ Code ด้านล่างไปใส่ในไฟล์ที่สร้างได้เลย

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

ส่วนสำคัญของ Code ด้านบนคือ postMessage() Method ซึ่งใช้ในการโพสต์ข้อความกลับไปที่หน้า HTML

หมายเหตุ: โดยปกติแล้ว Web Worker จะไม่ใช้สำหรับสคริปต์ง่ายๆ ดังกล่าว แต่ใช้กับงานที่ใช้ CPU มาก

การสร้าง Web Worker Object

หลังจากเรามีไฟล์ Web Worker แล้ว เราต้องเรียกไฟล์จากหน้า HTML

บรรทัดต่อไปนี้จะตรวจสอบว่ามีผู้ปฏิบัติงานอยู่แล้วหรือไม่ หากไม่ใช่ จะสร้างวัตถุผู้ปฏิบัติงานเว็บใหม่และรัน Code ใน “demo_workers.js”:

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

จากนั้นเราสามารถส่งและรับข้อความจาก Web Worker ได้

เพิ่ม Event Listener “onmessage” ให้กับ Web Worker

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

เมื่อ Web Worker โพสต์ข้อความ Code ภายใน Event Listener จะถูกดำเนินการ ข้อมูลจาก Web Worker ถูกเก็บไว้ใน event.data

การหยุด Web Worker

เมื่อ Web Worker Object ถูกสร้างขึ้น มันจะยังคงฟังข้อความต่อไป (แม้ว่าสคริปต์ภายนอกจะเสร็จสิ้นแล้วก็ตาม) จนกว่าจะสิ้นสุด

หากต้องการหยุดและทรัพยากรเบราว์เซอร์/คอมพิวเตอร์ฟรี ให้ใช้ terminate() Method:

w.terminate();

ใช้ Web Worker ซ้ำ

หากคุณตั้งค่าตัวแปร Worker เป็น Undefined หลังจากสิ้นสุดแล้ว คุณสามารถใช้ Code ซ้ำได้:

w = undefined;

ตัวอย่าง Code Web Worker แบบเต็ม

เราได้เห็น Worker Code ใน .js ไฟล์แล้ว ด้านล่างนี้เป็น Code สำหรับหน้า HTML:

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<p>นับเลข: <output id="result2"></output></p><br>
<button onclick="startWorker2()">Start Worker</button> 
<button onclick="stopWorker2()">Stop Worker</button><br>
<br>
<p><strong>Note:</strong> Internet Explorer 9 และเวอร์ชันก่อนหน้านี้ไม่รองรับ Web Workers</p>

<script>
var w2;

function startWorker2() {
  if(typeof(Worker) !== "undefined") {
    if(typeof(w2) == "undefined") {
      w2 = new Worker("html/demo_workers.js");
    }
    w2.onmessage = function(event) {
      document.getElementById("result2").innerHTML = event.data;
    };
  } else {
    document.getElementById("result2").innerHTML = "Sorry, your browser does not support Web Workers...";
  }
}

function stopWorker2() { 
  w2.terminate();
  w2 = undefined;
}
</script>

</body>
</html>
ลองดูสิ ❱
❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯