آموزش Web Workers API یا اجرا در پس زمینه در html

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

Web Worker یک نوع کد جاوا اسکریپت است که مستقل از سایر اسکریپت‌ها در پس‌زمینه اجرا می‌شود، بدون اینکه بر عملکرد صفحه تأثیر بگذارد. در حالی که Web Worker در پس‌زمینه اجرا می‌شود، می‌توانید به انجام هر کاری که می‌خواهید ادامه دهید: کلیک کردن، انتخاب چیزها و غیره.

بهزاد میرزازاده بهزاد میرزازاده

زمان مطالعه

3 دقیقه

بازدید

655

پرسش و پاسخ

0
آموزش Web Workers API یا اجرا در پس زمینه در html

فهرست مطالب برای مطالعه

یک Web Worker چیست؟

Web Worker یک نوع کد جاوا اسکریپت است که در پس‌زمینه مستقل از سایر اسکریپت‌ها اجرا می‌شود، بدون اینکه بر عملکرد صفحه تأثیر بگذارد

پشتیبانی مرورگر

اعداد جدول اولین نسخه مرورگر را مشخص می کند که به طور کامل از Web Workers پشتیبانی می کند.

پشتیبانی مرورگر ها از Web Worker در html

نمونه ای از 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>