1. Home
  2. Web Workers HTML5

Najlepszy samouczek Web Workers HTML5 W 2024 r. W tym samouczku możesz dowiedzieć się Co to jest Web Worker?,Pomoc Browser,przykłady HTML5 Web Workers,Przykłady,Wykrywanie, czy przeglądarka obsługuje Web Worker,Utwórz plik pracownika internetowej,Tworzenie obiektu Web Worker,Web Worker rozwiązanie,Przykładowy kod Kompletna Web Worker,Przykłady,Web Workers i DOM,

Web Workers HTML5

Pracownik internetowej wykonywanie kodu JavaScript w tle i nie ma wpływu na działanie strony.

Co to jest Web Worker?

Podczas wykonywania skryptu na stronie HTML, państwo strona nie odpowiada, dopóki skrypt jest kompletny.

Pracownik internetowej wykonywanie kodu JavaScript w tle, niezależnie od innych skryptów nie będzie miało wpływu na działanie strony. Można nadal robić, co chce zrobić: Kliknij, aby wybrać zawartość, etc., w czasie, gdy pracownik internetowa działa w tle.

Pomoc Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari i Opera wsparcia pracowników sieci.

przykłady HTML5 Web Workers

Poniższy przykład tworzy prosty robotnik internetowej, licząc w tle:

Przykłady

count:




Spróbuj »

demo_workers.js kod pliku:

var i = 0;

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

timedCount ();

Wykrywanie, czy przeglądarka obsługuje Web Worker

Przed utworzeniem pracownika internetowej, sprawdź przeglądarka użytkownika wspiera go:

if (typeof (robotnik)! == "niezdefiniowany")
{
// Tak! Support worker WWW!
//Jakiś kod plpl.
}
więcej
{
Web Worker // Niestety nie jest obsługiwany
}

Utwórz plik pracownika internetowej

Teraz stwórzmy nasz pracownik internetową w zewnętrznym JavaScript.

Tutaj stworzyliśmy licznik skryptu. Skrypt jest przechowywany w "demo_workers.js" file:

var i = 0;

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

timedCount ();

Ważna część kodu Powyższe metody postMessage () - służy do powrotu jakąś stronę HTML wiadomości.

Uwaga: pracownik internetowa nie jest powszechnie stosowane do takich prostych skryptów, ale dla większej liczby zadań obciążających procesor.

Tworzenie obiektu Web Worker

Mamy już plik pracownika internetową, a teraz musimy wywołać go od strony HTML.

Poniższy kod wykrywa obecność pracownika, jeśli nie ma to - to tworzy nowy pracownik internetowej obiekt, a następnie uruchomić "demo_workers.js" Kod:

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

Możemy wtedy odbyć i odbierać wiadomości od pracownika internetowej.

Dodaj do pracownika Web "onmessage" detektory zdarzeń:

w.onmessage = function (event) {
. Document.getElementById ( "Wynik") innerHTML = event.data;
};

Web Worker rozwiązanie

Kiedy utworzyć obiekt pracownik internetowej, nadal będzie nasłuchiwać wiadomości (nawet po zakończeniu skryptu zewnętrznego), dopóki nie zostanie zakończone.

Aby wypowiedzieć pracownikowi internetową i zwolnić zasoby przeglądarki / komputera, użyj metody terminate ():

w.terminate ();

Przykładowy kod Kompletna Web Worker

Widzieliśmy js kod Pracownik plików. Oto kod strony HTML:

Przykłady

<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> Ten poradnik (w3write.com) </ title>
</ Head>
<Body>

<P> Ilość: <wyjście id = "result"> </ wyjścia> </ p>
<Button onclick = "startWorker ()"> pracy </ button>
<Button onclick = "stopWorker ()"> zatrzymał </ button>

<P> <strong> Uwaga: </ strong> Internet Explorer 9 i wcześniejsze wersje IE nie obsługuje Web Workers </ p>.

<Script>
var w;

funkcjonować startWorker () {
if (typeof (robotnik)! == "niezdefiniowany") {
if (typeof (w) == "niezdefiniowany") {
w = nowego pracownika ( "demo_workers.js");
}
w.onmessage = function (event) {
. Document.getElementById ( "Wynik") innerHTML = event.data;
};
} Else {
document.getElementById ( "Wynik") innerHTML = "Niestety, Twoja przeglądarka nie obsługuje Web Workers pl." .;
}
}

Funkcja stopWorker ()
{
w.terminate ();
w = nieokreślone;
}
</ Script>

</ Body>
</ Html>

Spróbuj »

Web Workers i DOM

Od pracownika internetowej w zewnętrznym pliku, nie mogą uzyskać dostęp do obiektu JavaScript następujący przykład:

  • okno obiektu
  • Document Object
  • dominujące obiekty

Hot Tutorials

Contact US

Web Workers HTML5
10/30