آموزش Web Workers API در html

آموزش Web Workers API در html

زمان مطالعه

15 دقیقه

تعداد بازدید

222

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب

یک Web Worker چیست؟

هنگام اجرای اسکریپت ها در یک صفحه HTML، صفحه تا زمانی که اسکریپت به پایان برسد پاسخگو نمی شود.

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>

 



پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی