ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

اجرای اسکریپت ها در پس زمینه HTML5 مطلب ویژه

توسط 23 تیر, 1393 4551 0

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

web workersزبان های اسکریپتی برای ارائه تحولات و ایجاد پویایی در صفحات وب ایجاد شدند. این زبان ها با تقلید از روی زبان های برنامه نویسی ساخته شدند و بهمین دلیل دارای تشابه بسیاری با هم هستند. این زبان ها در اصل نمونه کوچک شده زبان های مادر خود هستند . تعدادی از فرمان ها و امکانات زبان های بزرگ در این زبان ها حذف شده اند . مثلا امکان نوشتن فایل یا پاک کردن فایل ها برروی سیستم کاربر مانند زبان های برنامه نویسی وجود ندارد . البته این زبان ها برای استفاده در زمینه کاری شبکه طراحی شده اند و حذف این دستورات علل خاصی ( از جمله بالا رفتن امنیت و ... ) داشته است.

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

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

شکل کلی از نحوه استفاده از این کد در HTML را در زیر به طور کامل مشاهده می کنید : سپس به طور مرحله به مرحله کد را برای شما باز می کنیم :

 

<!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>

 
در کد بالا یک چیزی طراحی می کنید که وقتی بر روی start worker کلیک شود از عدد 1 شروع به بالا رفتن می کند تا زمانی که stop worker را کلیک کنید .

مراحل را دنبال کنید : مرحله 1 ) بررسی اینکه مرورگر از این متد پشتیبانی می کند یا خیر :
برای این کار از کد زیر استفاده می شود :

 

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

 
مرحله 2 ) باید یک فایل web worker را بسازیم :

در زیر یک کد ساده جاوا اسکریپت می باشد که عمل شمارش را انجام می دهد و فقط  به عنوان یک مثال مطرح شده است :

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

 

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

 

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

 

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 ، اجرای شی را متوقف می کنیم :

w.terminate( ) ;

 

این مورد را ارزیابی کنید
(1 رای)
آخرین ویرایش در سه شنبه, 03 شهریور 1394 ساعت 15:49
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا