فهرست مطالب برای مطالعه
یک Web Worker چیست؟
Web Worker یک نوع کد جاوا اسکریپت است که در پس‌زمینه مستقل از سایر اسکریپت‌ها اجرا می‌شود، بدون اینکه بر عملکرد صفحه تأثیر بگذارد
پشتیبانی مرورگر
اعداد جدول اولین نسخه مرورگر را مشخص می کند که به طور کامل از Web Workers پشتیبانی می کند.
نمونه ای از HTML Web Workers
مثال زیر یک Web Worker ساده ایجاد می کند که اعداد را در پس زمینه می شمارد:
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p>
<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();
w = undefined;
}
</script>
</body>
</html>
برسی پشتیبانی Web Worker
قبل از ایجاد Web Worker، بررسی کنید که آیا مرورگر کاربر از آن پشتیبانی می‌کند یا خیر:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
ساخت یک فایل Web Worker
بیایید Web Worker خود را در با جاوا اسکریپت ایجاد کنیم.
اسکریپت در فایل "demo_workers.js" ذخیره می شود:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
بخش مهم کد بالا متد postMessage است - که برای ارسال یک پیام به صفحه HTML استفاده می شود.
توجه: معمولاً Web Worker ها برای چنین اسکریپت‌های ساده‌ای استفاده نمی‌شوند، بلکه برای کارهای فشرده‌تر CPU استفاده می‌شوند.
ساخت یک Web Worker Object
اکنون که فایل web worker را داریم، باید آن را از یک صفحه HTML فراخوانی کنیم.
خطوط زیر بررسی می‌کند که Worker از قبل وجود داشته باشد، در غیر این صورت یک شی Web Worker جدید ایجاد می‌کند و کد را در "demo_workers.js" اجرا می‌کند:
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
الان میتونیم با web worker پیام ارسال و دریافت کنیم
یک listiner رویداد "onmessage" را به Web Worker اضافه کنید.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
زمانی که Web Worker پیامی را ارسال می‌کند، کد درون listiner رویداد اجرا می‌شود. داده های Web Worker در event.data ذخیره می شود.
خاتمه دادن به یک Web Worker
هنگامی که یک شی Web Worker ایجاد می شود، به گوش دادن به پیام ها (حتی پس از اتمام اسکریپت خارجی) ادامه می دهد تا زمانی که پایان یابد.
برای خاتمه دادن به Web Worker و منابع رایگان مرورگر/کامپیوتر، از متد ()terminate استفاده کنید:
w.terminate();
استفاده مجدد از Web Worker
اگر متغیر worker را روی undefined تنظیم کنید، پس از پایان یافتن آن، می توانید دوباره از کد استفاده کنید:
w = undefined;
کد مثال Full Web Worker
یک نمونه مثال کامل کد html و وب وورکر
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p>
<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();
w = undefined;
}
</script>
</body>
</html>
