میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

Web Worker ها در HTML

آشنایی با Web Worker ها در HTML

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

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

 

مثال زیر یک web worker ساده ایجاد می کند که اعداد را در پس زمینه شمارش می کند:

 

 

<p>شمارش اعداد <output id=”result”></output></p>

<button onclick=”startWorker()”>شروع شمارش</button> 

<button onclick=”stopWorker()”>پایان شمارش</button>

<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>

بررسی مرورگر از پشتیبانی web worker  :

if (typeof(Worker) !== “undefined”) {
  // مرورگر پشتیبانی می کند

} else {

  // متاسفانه مرورگر پشتیبانی نمی کند
}

ساخت یک web worker

حالا وقت ساخت یک web worker در یک فایل جاوا اسکریپت بیرونی است.

در اینجا، ما یک اسکریپت ایجاد می کنیم که شمارش می کند. این اسکریپت به نام “demo_worker.js”  نام گذاری می‌شود.

 

var i = 0;

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

timedCount();

قسمت مهم کد بالا، تابع postmessage است که برای ارسال یک پیام به صفحه html استفاده می‌شود.

نکته: معمولا web worker برای چنین موارد ساده ای مورد استفاده قرار نمی‌گیرند، وظیفه این اسکریپت ها انجام فعالیت های متمرکز بر cpu است.

 

ساخت یک آبجکت Worker

حالا ما یک فایل web worker داریم، باید آن را در صفحه وب فراخوانی کنیم.

خط های زیر بررسی می کند اگر web worker از قبل وجود ندارد آن را بسازد و اجرا کند

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

پس از آن، ما می توانیم توسط web worker پیام دریافت و ارسال کنیم. برای این کار، یک رویداد onmessage به web worker اضافه می کنیم.

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

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

 

متوقف کردن یک Web Worker

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

برای متوقف کردن یک web worker و آزاد کردن منابع مرورگر و کامپیوتر باید از تابع terminate استفاده شود.

w.terminate();

 

استفاده مجدد Web Worker

اگر مقدار متغیر worker را برابر با undefined قرار دهید، پس از متوقف شدن web worker، می توانید با استفاده از کد زیر آن را دوباره استفاده کنید.

w = undefined;

یک مثال کامل از Web Worker

تا اینجا یک مثال از کد های اسکریپت بیرونی دیده ایم، در ادامه کد های مربوط به صفحه 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>
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! No Web Worker support.";
  }
}

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

</body>
</html>

ارتباط Web Worker و DOM

از آنجایی که web worker اسکریپت های بیرونی هستند، به آبجکت های زیر دسترسی ندارند:

  • آبجکت پنجره
  • آبجکت سند
  • آبجکت والد

 

امیدواریم این بخش از آموزش در مورد Web Worker ها در Html نیز برای شما مفید واقع شده باشد و ما را در تلگرام و اینستاگرام دنبال کنید .

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟