รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การใช้ HTML5 Web Worker ช่วยให้ JavaScript ทำงานแบบ Background Mode

    Web Worker ช่วยให้ชุดคำสั่ง JavaScript ทำงานในรูปแบบ Background Mode ทำให้ผู้ใช้งานสามารถใช้งานฟังก์ชันงานอื่นๆ บนหน้ำเว็บเพจได้ โดยไม่ต้องรอให้ JavaScript ทำงานเสร็จก่อน โดย Web Worker จะสั่งให้ JavaScript ทำงานโดยไม่กระทบกับงานอื่นๆ

     

    ด้วยเหตุนี้ ผู้พัฒนาจึงสามารถออกแบบหน้าเว็บไซต์ให้มีความซับซ้อนมากๆ ได้โดยไม่ต้องกังวลว่า เครื่องพีซีของผู้ใช้จะเกิดการสะดุดขณะที่มีการเลื่อนหน้าหรือเกิดการหน่วง ขณะที่กำลังมีการป้อนข้อมูลเหมือนอย่างเช่นในอดีต

     

    ตรวจสอบการ support ของ browser

    if(typeof(Worker) !== "undefined") {

        // Yes! Web worker support!

        // Some code.....

    } else {

        // Sorry! No Web Worker support..

    }

     

    ตัวอย่างการใช้งานเช่น

    <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

     

    ในตัวอย่างนี้คือการสร้างสคริปต์ให้นับ โดยค่อยๆเพิ่มๆทีละ 1 ซึ่งสคริปต์นี้จะบรรจุอยู่ในที่เดียวกับ "demo_workers.js" file:

    ***ตัวอย่างนี้ไม่สามารถดใช้ได้หากไม่สร้าง ไฟล์ "demo_workers.js" file: เสียก่อน

     

    var i=0;

    function timedCount()

    {i=i+1;

    postMessage(i);

    setTimeout("timedCount()",500);}

    timedCount();

     

    สำหรับสร้าง 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;};

     

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

    w.terminate();

     

     

     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com