ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 13 HTML5 Web Worker
   Web Worker คือ JavaScript ที่สามารถทำให้ script ทำงานหลายๆอย่างพร้อมกันได้ ซึ่งทำให้ผู้ใช้งานเว็บเพจได้ โดยไม่ต้องรอให้ JavaScript ทำงานเสร็จก่อน โดย web worker จะสั่งให้ JavaScript ทำงานโดยไม่กระทบกับงานอื่นๆ ด้วยเหตุนี้ ผู้พัฒนาจึงสามารถออกแบบหน้าเว็บไซต์ให้มีความซับซ้อนมากๆ ได้โดยไม่ต้องกังวลว่า เครื่องพีซีของผู้ใช้จะเกิดการสะดุดขณะที่มีการเลื่อนหน้าหรือเกิดการหน่วง ขณะที่กำลังมีการป้อนข้อมูลเหมือนอย่างเช่นในอดีต
   Web Worker ทำงานได้ดีกับทุกweb browser ยกเว้น IE  Internet Explorer ต้องเป็นเวอร์ชั่น 10 ขึ้นไป
ตัวอย่างเช่น

<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker()
{if(typeof(Worker)!=="undefined")
  {  if(typeof(w)=="undefined")
  {  w=new Worker("demo_workers.js");  }
  w.onmessage = function (event) 
{    document.getElementById("result").innerHTML=event.data;    };  }
else
  {  document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";  }}
function stopWorker()
{ w.terminate();}
</script>
</body>
</html

คลิกเพื่อดูตัวอย่าง HTML5 Web Worker

คำอธิบาย
1.สำหรับตรวจสอบว่า web worker สามารถใช้กับบราวเซอร์ได้หรือไม่

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

2.สำหรับสร้างไฟล์ web worker บน external JavaScript
เช่นในตัวอย่างนี้คือการสร้างสคริปต์ให้นับ โดยค่อยๆเพิ่มๆทีละ 1 ซึ่งสคริปต์นี้จะบรรจุอยู่ในเดียวกับ "demo_workers.js" file:
***ตัวอย่างนี้ไม่สามารถดใช้ได้หากไม่สร้าง ไฟล์ "demo_workers.js" file: เสียก่อน

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

3.สำหรับสร้าง web worker object และรันโค๊ดบน "demo_workers.js":

if(typeof(w)=="undefined")
  {  w=new Worker("demo_workers.js");  } เราสามารถส่งและรับข้อความจาก web worker ด้วยการเพิ่ม "onmessage"
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;};

4.สำหรับสร้าง terminate web worker (ตัวหยุดการทำงานของสคริปต์ที่กำลังรันอยู่บนหน้าเว็บไซต์)

w.terminate();


ข้อมูลอ้างอิง
http://www.w3schools.com

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 24 มิถุนายน 2562
โดย jamepiyawat จ 24 มิ.ย. 2019 10:03 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
0
1
จ 24 มิ.ย. 2019 10:03 am โดย jamepiyawat
งานประจำวันที่ 24 มิถุนายน 2562
โดย EyePornnipa จ 24 มิ.ย. 2019 10:02 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
2
จ 24 มิ.ย. 2019 10:02 am โดย EyePornnipa
งานประจำวันที่ 24 มิถุนายน 2562
โดย chatee supasand จ 24 มิ.ย. 2019 9:57 am บอร์ด MT33 - นายชาตรี สุภาแสน
0
1
จ 24 มิ.ย. 2019 9:57 am โดย chatee supasand
งานประจำวันที่ 24 มิถุนายน 2562
โดย jirawoot จ 24 มิ.ย. 2019 9:56 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
0
3
จ 24 มิ.ย. 2019 9:56 am โดย jirawoot
multipart/form-data ใช่กับโทรศัพท์ oppo ไม่ได้
โดย apinanrun อ 23 มิ.ย. 2019 10:56 am บอร์ด Programming - PHP
5
26
อ 23 มิ.ย. 2019 6:57 pm โดย mindphp
สิทธิประกันสังคมกรณีเจ็บป่วยที่คนทำงานควรรู้
โดย EyePornnipa ส 22 มิ.ย. 2019 7:49 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
21
ส 22 มิ.ย. 2019 7:49 pm โดย EyePornnipa
VDO-การเดินทางจากกรุงเทพไปสระบุรี
โดย jirawoot ส 22 มิ.ย. 2019 7:01 pm บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
0
6
ส 22 มิ.ย. 2019 7:01 pm โดย jirawoot
Work Shop VDO การตรวจสอบบัญชี กับโปรแกรมคอมพิวเตอร์ที่จำเป็น
โดย EyePornnipa ส 22 มิ.ย. 2019 6:53 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
15
ส 22 มิ.ย. 2019 6:53 pm โดย EyePornnipa
Kano Computer Kit Touch คือ อะไร
โดย jirawoot ส 22 มิ.ย. 2019 5:34 pm บอร์ด Share Knowledge
0
17
ส 22 มิ.ย. 2019 5:34 pm โดย jirawoot
Rate อัตราดอกเบี้ยของแต่ล่ะธนาคาร
โดย Patipat ส 22 มิ.ย. 2019 5:08 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
ส 22 มิ.ย. 2019 5:08 pm โดย Patipat
iConn คืออะไร
โดย jirawoot ส 22 มิ.ย. 2019 3:53 pm บอร์ด Share Knowledge
0
20
ส 22 มิ.ย. 2019 3:53 pm โดย jirawoot
mod_rewrite คืออะไร สรุปคร่าวๆ
โดย Patipat ส 22 มิ.ย. 2019 3:23 pm บอร์ด PHP Knowledge
0
19
ส 22 มิ.ย. 2019 3:23 pm โดย Patipat
อาเรย์คืออะไร
โดย jamepiyawat ส 22 มิ.ย. 2019 3:18 pm บอร์ด PHP Knowledge
0
17
ส 22 มิ.ย. 2019 3:18 pm โดย jamepiyawat
วิธีการทำให้ภาษา php เข้าไปเก็บข้อมูลและแสดงข้อมูลเฉพาะที่เราต้องการ
โดย jamepiyawat ส 22 มิ.ย. 2019 12:14 pm บอร์ด PHP Knowledge
0
20
ส 22 มิ.ย. 2019 12:14 pm โดย jamepiyawat
งานประจำวันที่ 22 มิถุนายน 2562
โดย Patipat ส 22 มิ.ย. 2019 10:46 am บอร์ด M088 - ปฏิภัทร สารธรรม
3
18
ส 22 มิ.ย. 2019 6:01 pm โดย Patipat
งานประจำวันที่ 22 มิถุนายน 2562
โดย jamepiyawat ส 22 มิ.ย. 2019 10:09 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
2
10
ส 22 มิ.ย. 2019 7:19 pm โดย jamepiyawat
งานประจำวันที่ 22 มิถุนายน 2562
โดย jirawoot ส 22 มิ.ย. 2019 10:05 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
2
20
ส 22 มิ.ย. 2019 5:10 pm โดย Ittichai_chupol
งานประจำวันที่ 22 มิถุนายน 2562
โดย EyePornnipa ส 22 มิ.ย. 2019 10:02 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
2
45
ส 22 มิ.ย. 2019 7:50 pm โดย EyePornnipa
วิธีการใช้ loop for แสดงข้อมูลที่อยู่ในอาเรย์ออกมาทั้งหมดออกให้ได้เห็นกัน
โดย jamepiyawat ศ 21 มิ.ย. 2019 6:34 pm บอร์ด PHP Knowledge
0
22
ศ 21 มิ.ย. 2019 6:34 pm โดย jamepiyawat
เรียนรู้งานบริการของบริษัท
โดย EyePornnipa ศ 21 มิ.ย. 2019 6:17 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
10
ศ 21 มิ.ย. 2019 6:17 pm โดย EyePornnipa