آموزش 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 را نمایش
داده یم :
<!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 :
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :