٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش Web Workers API

وب کارگر یک JavaScript است که در پس زمینه اجرا می شود ، بدون اینکه بر عملکرد صفحه تأثیر بگذارد. وب کارگر چیست؟ هنگام اجرای اسکریپت ها در یک صفحه HTML ، صفحه تا زمان پایان اسکریپت پاسخ نمی دهد.…

محمد یوسفی

29 جولای 2021

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


وب کارگر چیست؟

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

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

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

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


مثال کارگران وب

مثال زیر یک وب کارگر ساده ایجاد می کند که اعداد را در پس زمینه شمارش می کند:

مثال

Count numbers:
Start Worker Stop Worker

پشتیبانی وب کارگر را بررسی کنید

قبل از ایجاد یک وب کارگر ، بررسی کنید که آیا مرورگر کاربر از آن پشتیبانی می کند:

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
  // Some code.....
} else {
  // Sorry! No Web Worker support..
}

یک پرونده وب کارگر ایجاد کنید

حال ، بیایید وب کارگر خود را در یک JavaScript خارجی ایجاد کنیم.

در اینجا ، ما یک اسکریپت ایجاد می کنیم که دارای اهمیت باشد. اسکریپت در پرونده “demo_workers.js” ذخیره شده است:

let i = 0;

function timedCount() {
  i ++;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

قسمت مهم کد بالا postMessage()روش است – که برای ارسال پیام به صفحه HTML استفاده می شود.

توجه: به طور معمول از وب کارگران برای چنین اسکریپت های ساده ای استفاده نمی شود ، بلکه برای کارهای بیشتر پردازنده استفاده می شود.


ایجاد یک کارگر وب

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

خطوط زیر بررسی می کند که آیا کارگر از قبل وجود دارد یا خیر – این یک شی web وب کارگر جدید ایجاد می کند و کد را در “demo_workers.js” اجرا می کند:

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

سپس می توانیم از طریق وب کارگر پیام ارسال و دریافت کنیم.

شنونده رویداد “onmessage” را به وب کارگر اضافه کنید.

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

وقتی کارگر وب پیامی را ارسال می کند ، کد درون شنونده رویداد اجرا می شود. داده های کارگر وب در event.data ذخیره می شود.


یک وب کارگر را خاتمه دهید

وقتی یک شی worker وب کارگر ایجاد می شود ، تا پایان یافتن پیام برای گوش دادن به پیام (حتی پس از پایان اسکریپت خارجی) ادامه خواهد داشت.

برای خاتمه یک وب کارگر و منابع رایگان مرورگر / رایانه ، از terminate()روش زیر استفاده کنید:

w.terminate();

از Web Worker استفاده مجدد کنید

اگر متغیر کارگر را روی تعریف نشده تنظیم کنید ، پس از پایان یافتن آن ، می توانید از کد استفاده مجدد کنید:

w = undefined;

کد مثال کامل کارگر وب

ما قبلاً کد Worker را در پرونده .js مشاهده کرده ایم. در زیر کد صفحه HTML آورده شده است:

مثال

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

وب کارگران و DOM

از آنجا که کارگران وب در پرونده های خارجی هستند ، به اشیا Java JavaScript زیر دسترسی ندارند:

  • شی پنجره
  • شی document سند
  • شی parent والدین

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها