HTML5 Web Workers
HTML5 Web Workers چیست ؟ چه کاربردی در html دارد؟
آموزش APIs درس چهارم
HTML5 Web Workers یک JavaScript در حال اجرا در پس زمینه است، بدون اینکه تاثیری بر عملکرد صفحه داشته باشد.
HTML5 Web Workers چیست؟
هنگام اجرای اسکریپت ها در یک صفحه HTML، صفحه تا زمانیکه اسکریپت به اتمام برسد، پاسخگو نخواهد بود.
Web Workers یک جاوا اسکریپت است که در پس زمینه اجرا می شود، مستقل از سایر اسکریپت ها، بدون تاثیر بر عملکرد صفحه. شما می توانید هر کاری که می خواهید انجام دهید: کلیک کردن، انتخاب چیزها و غیره، در حالی که Web Workers در پس زمینه اجرا می شود.
جاوا اسکریپت html را از اینجا ببینید
پشتیبانی مرورگر
اعداد در جدول اولین نسخه مرورگر را که به طور کامل از Web Workers پشتیبانی می کند مشخص می کند.
API | کروم | اینترنت اکسپلورر | فایرفاکس | سافاری | آپرا |
Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
بررسی پشتیبانی از Web Workers
قبل از ایجاد یک Web Workers ، بررسی کنید که آیا مرورگر کاربر از آن پشتیبانی می کند یا نه :
[php]
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code…..
} else {
// Sorry! No Web Worker support..
}
[/php]
یک فایل Web Worker ایجاد کنید
حالا، اجازه دهید Web Worker خود را در جاوااسکریپت خارجی ایجاد کنیم.
در اینجا، ما یک اسکریپت ایجاد می کنیم که شمارش دارد. اسکریپت در فایل demo_workers.js ذخیره می شود:
[php]
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
[/php]
بخش مهم از کد بالا روش postMessage () است که برای ارسال یک پیام به صفحه HTML استفاده می شود.
نکته: به طور معمول Web Worker برای چنین اسکریپتهای ساده مورد استفاده قرار نمیگیرند، اما بیشتر برای وظایف فشرده CPU. مورد استفاده قرار می گیرند.
یک شیء Web Worker ایجاد کنید
حالا که ما فایل Web Worker را داریم، باید آن را از یک صفحه HTML فراخوانی کنیم.
خطوط زیر بررسی می کند که آیا Worker در حال حاضر وجود دارد یا نه – یک شی جدید Web Worker ایجاد می کند و کد را در “demo_workers.js” اجرا می کند:
[php]
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
[/php]
سپس ما می توانیم پیام ها را از Web Worker ارسال و دریافت کنیم.
یک “onmessage” event listener را به Web Worker اضافه کنید.
[php]
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
[/php]
وقتی web worker یک پیام ارسال می کند، کد در event listener اجرا می شود. داده های web worker در event.data ذخیره می شود.
یک Web Worker را متوقف کنید
هنگامی که یک شیء Web Worker ایجاد می شود، همچنان به گوش دادن به پیام ها (حتی پس از پایان اسکریپت خارجی) ادامه می دهد تا زمانی که پایان یابد.
برای خاتمه Web Worker و منابع مرورگر / رایانه رایگان، از روش terminate () استفاده کنید:
[php]
w.terminate();
[/php]
استفاده مجدد از HTML5 Web Workers
اگر متغیر worker را به تعریف نشده تنظیم کنید، پس از پایان دادن به آن، شما می توانید کد را دوباره استفاده کنید:
[php]
w = undefined;
[/php]
مثال کد Web Worker کامل
ما قبلا کد Worker را در فایل .js دیده ایم. در ادامه کد برای صفحه HTML آمده است:
مثال :
[php]
<!DOCTYPE html>
<html>
<body>
Count numbers: <output id="result"></output>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Avar%20w%3B%0A%0Afunction%20startWorker()%20%7B%0A%20%20%20%20if(typeof(Worker)%20!%3D%3D%20%22undefined%22)%20%7B%0A%20%20%20%20%20%20%20%20if(typeof(w)%20%3D%3D%20%22undefined%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20w%20%3D%20new%20Worker(%22demo_workers.js%22)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20w.onmessage%20%3D%20function(event)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById(%22result%22).innerHTML%20%3D%20event.data%3B%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20document.getElementById(%22result%22).innerHTML%20%3D%20%22Sorry!%20No%20Web%20Worker%20support.%22%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20stopWorker()%20%7B%0A%20%20%20%20w.terminate()%3B%0A%20%20%20%20w%20%3D%20undefined%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
[/php]
Web Workers و DOM
از آنجا که Web Workers در فایل های خارجی هستند، آنها دسترسی به اشیاء جاوا اسکریپت زیر را ندارند:
• The window object
- The document object
• The parent object
1 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
درود
این مطالب خیلی اموزنده است. سپاس از شما