آموزش HTML 5 > اجرای اسکریپت ها در پس زمینه  >  متد web workers

متد web workers :

در زمان اجرای برخی اسکریپت ها در صفحات  ، ممکن است صفحه در اصطلاح هنگ کرده و به کلیک ها و درخواست های کاربر تا زمانی که اجرای آن اسکریپت تمام شود ،  پاسخ ندهد . این مسئله بیشتر اوقات دردسر ساز شده و حتی باعث کرک شدن . خروج اجباری مرورگر از صفحه وبسته شدن آن می شود . در HTML5 برای حل این مشکل راه حلی به نام متد Web Worker پیشبینی شده است .

 Web Worker باعث می شود تا اسکریپت ها بدون توجه به سایر اسکریپت های صفحه در پشت پرده اجرا شده و بر روی کارایی و عملکرد صفحه تاثیری نداشته باشند . با استفاده از این متد می توان در حین اجرای اسکریپت ها ، به صورت عادی به کار با صفحه پرداخته و به کلیک کردن و انچام سایر امور مورد نظر خود بپردازید .
در این بخش نحوه استفاده از این تکنیک جدید را در عمل نمایش خواهیم داد .

مرحله اول : چک کردن اینکه مرورگر از Web Worker پشتیبانی می کند یا خیر ؟

در مرحله اول باید چک کرد که آیا مرورگر ما از متد Web Worker پشتیبانی می کند یا خیر ، تا متناسب راه هر حالت ، کد لازم را تعیین کنیم .

کد زیر بررسی می کند آیا مرورگر در حال استفاده از متد web worker پشتیبانی می کند یا خیر  . تا در هر حالت کد مناسب آن اجرا شود :

چک کردن
پشتیبانی مرورگر
if ( typeof (Worker) !== " undefined " )
   {
         // مرورگر پشتیبانی می کند
        // کد های مورد نظر برای زمان پشتیبانی
   }
else
   {
        // متاسفانه مرورگر پشتیبانی نمی کند
        // کد های مورد نظر برای عدم پشتیبانی
   }

مرحله دوم : یک فایل یک فایل Web Worker بسازیم .

در متد Web Worker کد های جاوا اسکریپت مورد نظرمان را در یک فایل خارجی و در بیرون از صفحه قرار می دهیم .
بنابراین در مرحله دوم اسکریپت مورد نظرمان که در این مثال بصورت زیر است ، را در فایل خارجی بنام  Example.js  قرار می دهیم . کد زیر یک کد ساده جاوا اسکریپت می باشد که عمل شمارش را انجام می دهد و فقط  به عنوان یک مثال مطرح شده است :

مهمترین نکته در کد زیر متد  ( ) Post Message است ، که مقدار خروجی تابع را بصورت یک پیام به صفحه ارسال می کند .

کد اسکریپت
مثال
var i=0;

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

timedCount();

مرحله سوم : ایجاد یک شی Web Worker .

اکنون که فایل خارجی اسکریپت را در اختیار داریم باید به وسیله ای آن را از صفحه HTML فراخوانی کنیم . این کار بوسیله یک شی Web Worker انجام می شود . کد زیر ابتدا چک می کند که آیا یک شی Web Worker وجود دارد یا خیر . سپس درصورتی که شی وجود نداشته باشد ،  یک نمونه جدید ساخته و فایل  Example.js را اجرا می کند . برنامه کد موجود در فایل را اجرا کرده و جواب (Message) را به صفحه برمی گرداند .

چک کردن وجود
شی
web worker
if ( typeof (w) == "undefined" )
  {
      w=new Worker("Example.js");
   }

سپس بوسیله کد زیر می توان جواب برگشتی از فایل جاوا اسکریپت را در صفحه اعمال کرد . هنگامی که جواب از Web Worker برمی گردد تابع موجود در متد Event آن اجرا شود . اطلاعات برگشتی از Web در event.data آن نگهداری می شود .

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

مرحله آخر : توقف اجرای یک شی Web Worker .

هنگامی که یک شی Web Worker ایجاد می شود این شی مرتب به پاسخ ارسالی از طرف اسکریپت ها توجه می کند ( حتی  پس از اتمام فایل جاوا اسکریپت ) . به وسیله متد (  ) terminate ، اجرای آن شبی را متوقف می کنیم :

متوقف کردن
اجرای شی
web worker
w.terminate( ) ;

مثال عملی :

مثال : در مثال زیر ، کد کامل و خروجی کار با شی web worker را نمایش داده یم :

Example
<!DOCTYPE html>
<html>
  <body>
      <p> Count numbers : <output id="result" > </output> </p>
      <button onclick="startWorker( )" > Start Worker </button>
      <button onclick="stopWorker( )"> Stop Worker </button>
      <script>
          var w;
          function startWorker( ) {
                if (typeof (Worker) !== "undefined") {
                                   if (typeof (w) == "undefined") {
                                   w = new Worker("Example.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>
کد

Count numbers :

خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید  :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟