HTML5 Web Workers

HTML5 Web Workers  چیست ؟ چه کاربردی در  html  دارد؟

آموزش APIs درس چهارم

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

HTML5 Web Workers چیست؟

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

جاوا اسکریپت  html  را از اینجا ببینید

HTML5 Web Workers
HTML5 Web Workers

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

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

API کروم اینترنت اکسپلورر فایرفاکس سافاری آپرا
Web Workers۴.۰۱۰.۰۳.۵۴.۰۱۱.۵

 

بررسی  پشتیبانی از Web Workers

 

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

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. مورد استفاده قرار می گیرند.

حتما بخوانید:  پخش صدا html چگونه است

 

یک شیء Web Worker ایجاد کنید

حالا که ما فایل Web Worker را داریم، باید آن را از یک صفحه HTML فراخوانی کنیم.
خطوط زیر بررسی می کند که آیا Worker  در حال حاضر وجود دارد یا نه – یک شی جدید Web Worker ایجاد می کند و کد را در “demo_workers.js” اجرا می کند:

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

سپس ما می توانیم پیام ها را از Web Worker  ارسال و دریافت کنیم.
یک   “onmessage” event listener  را به Web Worker اضافه کنید.

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

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

 

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

هنگامی که یک شیء Web Worker ایجاد می شود، همچنان به گوش دادن به پیام ها (حتی پس از پایان اسکریپت خارجی) ادامه می دهد تا زمانی که پایان یابد.
برای خاتمه Web Worker و منابع مرورگر / رایانه رایگان، از روش terminate () استفاده کنید:

 w.terminate();

 

حتما بخوانید:  واکنش گرایی html

استفاده مجدد از HTML5 Web Workers

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

 w = undefined;

 

مثال کد Web Worker کامل

ما قبلا کد Worker را در فایل .js دیده ایم. در ادامه  کد برای صفحه HTML آمده است:

مثال :

 <!DOCTYPE html>
<html>
<body>



Count numbers: <output id="result"></output>

<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Avar%20w%3B%0A%0Afunction%20startWorker()%20%7B%0A%20%20%20%20if(typeof(Worker)%20!%3D%3D%20%22undefined%22)%20%7B%0A%20%20%20%20%20%20%20%20if(typeof(w)%20%3D%3D%20%22undefined%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20w%20%3D%20new%20Worker(%22demo_workers.js%22)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20w.onmessage%20%3D%20function(event)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById(%22result%22).innerHTML%20%3D%20event.data%3B%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20document.getElementById(%22result%22).innerHTML%20%3D%20%22Sorry!%20No%20Web%20Worker%20support.%22%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20stopWorker()%20%7B%0A%20%20%20%20w.terminate()%3B%0A%20%20%20%20w%20%3D%20undefined%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

</body>
</html> 

Web Workers  و DOM

از آنجا که Web Workers  در فایل های خارجی هستند، آنها دسترسی به اشیاء جاوا اسکریپت زیر را ندارند:
•           The window object

  • The document object

•           The parent object

امتیاز کاربران به این مطلب
۰ نفر - میانگین: ۰
تلگرام

دیدگاه‌تان را ثبت کنید:

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

PHN0eWxlPi5oX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWV7cG9zaXRpb246cmVsYXRpdmU7fSAuaF9pZnJhbWUtYXBhcmF0X2VtYmVkX2ZyYW1lIC5yYXRpbyB7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO2hlaWdodDphdXRvO30gLmhfaWZyYW1lLWFwYXJhdF9lbWJlZF9mcmFtZSBpZnJhbWUge3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlOyBoZWlnaHQ6MTAwJTt9PC9zdHlsZT48ZGl2IGNsYXNzPSJoX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWUiPiA8c3BhbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7cGFkZGluZy10b3A6IDU3JSI+PC9zcGFuPjxpZnJhbWUgc3JjPSJodHRwczovL3d3dy5hcGFyYXQuY29tL3ZpZGVvL3ZpZGVvL2VtYmVkL3ZpZGVvaGFzaC85dHk0VS92dC9mcmFtZSIgYWxsb3dGdWxsU2NyZWVuPSJ0cnVlIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW49InRydWUiIG1vemFsbG93ZnVsbHNjcmVlbj0idHJ1ZSIgPjwvaWZyYW1lPjwvZGl2Pg==
با سپاس از ثبت دیدگاه شما دوست عزیز
از تماشای این ویدیو لذت ببرید ...
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود فایل سخنرانی استیو جابز ...
ایبوک هدف‌گذاری موثر
زودتر از آنچه فکرش را می‌کنید به خواسته‌هایتان دست پیدا کنید!
* لینک دانلود بلافاصله ایمیل می‌شود.
چهار عامل شگفت انگیز کسب درآمد چیست؟
فقط چند ثانیه تا دانلود فاصله دارید!
* سه ایده کسب و کار خانگی پولساز
فقط چند ثانیه تا دانلود فاصله دارید!
* ایبوک: ده مکان عالی برای پیدا کردن یک ایده جدید
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود ویدیوی جذاب و با کیفیت مصاحبه جک ما
از همین امروز شروع کنید
بدون تجربه و دانش فنی وارد دنیای درآمدهای اینترنتی شوید!
فایل‌های آموزشی برای شما ایمیل می‌شود.
فقط چند ثانیه تا دریافت این فایل آموزشی فاصله دارید!
فایل‌های آموزشی ویژه اعضای سایت
* اگر عضو نیستید با وارد کردن ایمیل‌تان به این فایل دسترسی پیدا می‌کنید
دسترسی مخصوص اعضای سایت
عضو سایت نیستید؟
فقط کافیه نام و ایمیل‌تان را وارد کنید و ...
* دسترسی سریع به تمام فایل‌های آموزشی
هدیه ما به شما
با سپاس از اینکه دیدگاه تان را در سایت ما ثبت کردید.


یک کوپن تخفیف 30%
  • مشاوره حضوری
  • دوره های آنلاین
  • بسته های آموزشی
  • محصولات دانلودی
  • وبینارهای آموزشی
  این کد فقط یکبار به شما نمایش داده می‌شود.
کد: qwert
ورود کاربران
* دسترسی رایگان به بخش آکادمی