Web Workers API (Fon jarayonlari)

Web Worker - bu sahifaning ishlashiga ta’sir qilmasdan, fonda ishlaydigan JavaScript.

Web Worker nima?

HTML sahifasida skriptlar ishga tushirilganda, sahifa skript tugaguncha javob bermaydigan (unresponsive) holatga o‘tadi.

Web Worker - bu sahifaning ishlashiga ta’sir qilmasdan, boshqa skriptlardan mustaqil ravishda fonda ishlaydigan JavaScript. Siz xohlagan narsani qilishni davom ettirishingiz mumkin: Web Worker fonda ishlayotgan paytda bosish, narsalarni tanlash va hokazo.

Brauzerlarda qo‘llab-quvvatlash

Jadvaldagi raqamlar Web Workers-ni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyalarini ko‘rsatadi:


Chrome 4	IE 10	Firefox 3.5	Safari 4	Opera 11.5
Jan 2010	Sep 2012	Jun 2009	Jun 2009	Jun 2011

Web Worker misoli

Quyidagi misol fon rejimida raqamlarni sanaydigan oddiy web worker yaratadi:

Misol

Count numbers:

O‘zingiz sinab ko‘ring »

Web Worker qo‘llab-quvvatlanishini tekshirish

Web worker yaratishdan oldin foydalanuvchi brauzeri uni qo‘llab-quvvatlashini tekshiring:

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

Web Worker faylini yaratish

Keling, tashqi JavaScript-da veb-xodimimizni yarataylik.

Bu yerda biz hisobga olinadigan skript yaratamiz. Skript "demo_workers.js" faylida saqlanadi:

let i = 0;

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

timedCount();

Yuqoridagi kodning muhim qismi postMessage() usuli bo‘lib, u HTML sahifasiga xabar yuborish uchun ishlatiladi.

Eslatma: Odatda Web Worker’lari bunday oddiy skriptlar uchun emas, balki ko‘proq protsessor talab qiladigan vazifalar uchun ishlatiladi.

Web Worker obyektini yaratish

Endi bizda Web Worker fayli bor, biz uni HTML sahifasidan chaqirishimiz kerak.

Quyidagi qatorlar ishchi allaqachon mavjud yoki yo‘qligini tekshiradi, agar mavjud bo‘lmasa - u yangi Web Worker obyektini yaratadi va kodni "demo_workers.js" da ishga tushiradi:

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

Keyin Web Worker’dan xabarlarni yuborishimiz va qabul qilishimiz mumkin.

Web Worker’ga "onmessage" voqea tinglovchisini qo‘shing.

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

Web Worker xabarni joylashtirganda, voqea tinglovchisi ichidagi kod bajariladi. Web Worker ma’lumotlari event.data da saqlanadi.

Web Worker’ni to‘xtatish

Web worker obyekti yaratilgach, u to‘xtatilguncha (hatto tashqi skript tugagandan keyin ham) xabarlarni tinglashda davom etadi.

Veb-xodimni va bepul brauzer/kompyuter resurslarini tugatish uchun terminate() usuli:

w.terminate();

Web Worker’ni qayta ishlatish

Agar siz ishchi o‘zgaruvchini aniqlanmagan qilib qo‘ysangiz, u tugatilgandan so‘ng, kodni qayta ishlatishingiz mumkin:

w = undefined;

Web Worker misolining to‘liq kodi

Biz allaqachon .js faylida Ishchi kodini ko‘rganmiz. Quyida HTML sahifasi uchun kod keltirilgan:

Misol

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

O‘zingiz sinab ko‘ring »

Web Workers va DOM

Veb-xodimlar tashqi fayllarda bo‘lganligi sababli, ular quyidagi JavaScript obyektlariga kirish huquqiga ega emaslar:

window obyekti
document obyekti
parent obyekti

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish