اجرای کدهای javascript در پشت پرده
Web Worker یک کد JavaScript است که در پشت پرده، بدون اینکه بر کارآیی صفحه تأثیری داشته باشد، اجرا می شود.
web worker چیست؟
زمان اجرای اسکریپت ها در صفحات HTML، تا زمانی که اجرای اسکریپت تمام نشود، صفحه به کلیک ها و درخواست های کاربر پاسخ نمی دهد.
Web Worker یک کد JavaScript است که در پشت پرده، مستقل از اسکریپت های دیگر بدون اینکه بر روی کارآیی و عملکرد صفحه تاثیری داشته باشد اجرا می شود. با استفاده از این متد می توان در حین اجرای اسکریپت ها، به صورت عادی به کار با صفحه پرداخته و به کلیک کردن و انجام سایر امور مورد نظر خود بپردازید.
پشتیبانی مرورگرها
مرورگرهای Internet Explorer 10, Firefox, Opera, Chrome, Safari متد Web Worker را پشتیبانی می کنند.
مثال Web Worker در HTML5
در مثال زیر، یک Web Worker ساده ایجاد کرده ایم که با کلیک روی دکمه "Start Worker" شروع به شمارش اعداد می کند:
مثال (اجرای کدهای javascript در پشت پرده)
<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>
آیا مرورگر از Web Worker پشتیبانی می کند؟
در مرحله اول باید چک کرد که آیا مرورگر ما از متد Web Worker پشتیبانی می کند یا خیر:
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}
ایجاد فایل Web Worker
در متد Web Worker کدهای JavaScript مورد نظرمان را در یک فایل خارجی بنام "demo_workers.js" و در بیرون از صفحه قرار می دهیم.
کد زیر یک کد ساده JavaScript است که عمل شمارش را انجام می دهد و فقط به عنوان یک مثال مطرح شده است:
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
مهمترین نکته در کد بالا متد ()postMessage است، که مقدار خروجی تابع را بصورت یک پیام به صفحه ارسال می کند.
توجه: از Web Workerها به صورت معمول برای کارهای ساده ای مانند مثال بالا، استفاده نمی شود و بیشتر برای کارهایی که CPU زیادی مصرف می کنند، استفاده می شود.
ایجاد یک شیء Web Worker
اکنون که فایل خارجی Web Worker را در اختیار داریم باید از صفحه HTML، آنرا فراخوانی کنیم.
این کار بوسیله یک شی Web Worker انجام می شود. کد زیر ابتدا چک می کند که آیا یک شی Web Worker وجود دارد یا خیر، سپس درصورتی که شی وجود نداشته باشد، یک نمونه جدید ساخته و فایل "demo_workers.js" را اجرا می کند.
{
w=new Worker("demo_workers.js");
}
برنامه کد موجود در فایل را اجرا کرده و جواب (Message) را به صفحه برمی گرداند.
حالا از طریق Web Worker می توانیم پیام ها را دریافت و یا ارسال کنیم.
رویداد "onmessage" را به شیء Web Worker، اضافه می کنیم:
document.getElementById("result").innerHTML=event.data;
};
هنگامی که جواب از Web Worker برمی گردد، رویداد "onmessage" رخ می دهد و کد داخل آن اجرا می شود. اطلاعات برگشتی از Web Worker در event.data نگهداری می شود.
خاتمه دادن به یک Web Worker
زمانی که یک شیء Web Worker ایجاد می شود، تا زمانی که به کار آن خاتمه ندهید، برای دریافت پیام های ارسالی گوش می دهد. (حتی بعد از پایان اسکریپت خارجی)
برای خاتمه دادن به کار یک Web Worker و آزاد کردن منابع مرورگر و کامپیوتر، از متد ()terminate استفاده کنید:
Web Worker و DOM
از آنجایی که Web Workerها در فایل های خارجی تعریف می شوند، اشیاء JavaScript زیر نمی توانند به آن دسترسی داشته باشند:
- شیء window
- شیء document
- شیء parent
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 19191
