Szukaj…
Pętla zdarzeń w przeglądarce internetowej
Zdecydowana większość współczesnych środowisk JavaScript działa zgodnie z pętlą zdarzeń . Jest to powszechna koncepcja w programowaniu komputerowym, co zasadniczo oznacza, że Twój program stale czeka na nowe rzeczy, a kiedy to robią, reaguje na nie. Środowisko hosta wywołuje Twój program, odradzając „pętlę”, „tyknięcie” lub „zadanie” w pętli zdarzeń, która następnie kończy się . Po zakończeniu tej tury środowisko hosta czeka na coś innego, zanim wszystko się zacznie.
Prostym przykładem jest przeglądarka. Rozważ następujący przykład:
<!DOCTYPE html>
<title>Event loop example</title>
<script>
console.log("this a script entry point");
document.body.onclick = () => {
console.log("onclick");
};
setTimeout(() => {
console.log("setTimeout callback log 1");
console.log("setTimeout callback log 2");
}, 100);
</script>
W tym przykładzie środowiskiem hosta jest przeglądarka internetowa.
- Parser HTML najpierw wykona
<script>. Będzie działać do końca. - Wywołanie
setTimeoutinformuje przeglądarkę, że po 100 milisekundach, powinien enqueue jest zadanie do wykonania danej czynności. - W międzyczasie pętla zdarzeń odpowiada za ciągłe sprawdzanie, czy jest coś innego do zrobienia: na przykład renderowanie strony internetowej.
- Jeśli po 100 milisekundach pętla zdarzeń nie będzie zajęta z innego powodu, zobaczy zadanie, które
setTimeoutkolejkuje i uruchomi funkcję, rejestrując te dwie instrukcje. - W dowolnym momencie, jeśli ktoś kliknie ciało, przeglądarka opublikuje zadanie w pętli zdarzeń w celu uruchomienia funkcji obsługi kliknięć. Pętla zdarzeń podczas ciągłego sprawdzania, co należy zrobić, zobaczy to i uruchomi tę funkcję.
Możesz zobaczyć, jak w tym przykładzie istnieje kilka różnych typów punktów wejścia do kodu JavaScript, które wywołuje pętla zdarzeń:
- Element
<script>jest wywoływany natychmiast - Zadanie
setTimeoutjest wysyłane do pętli zdarzeń i uruchamiane raz - Zadanie modułu obsługi kliknięć można wielokrotnie publikować i uruchamiać za każdym razem
Każda kolejka pętli zdarzeń odpowiada za wiele rzeczy; tylko niektóre z nich wywołują te zadania JavaScript. Aby uzyskać szczegółowe informacje, zobacz specyfikację HTML
I ostatnia rzecz: co rozumiemy przez to, że każde zadanie pętli zdarzeń „przebiega do końca”? Rozumiemy, że generalnie nie jest możliwe przerwanie bloku kodu, który jest w kolejce do uruchomienia jako zadanie, i nigdy nie jest możliwe uruchomienie kodu przeplatanego z innym blokiem kodu. Na przykład, nawet jeśli klikniesz w idealnym momencie, nigdy nie możesz uzyskać powyższego kodu, aby zalogować "onclick" kliknięcie "onclick" pomiędzy dwoma setTimeout callback log 1/2" . Wynika to ze sposobu, w jaki działa wysyłanie zadań; jest oparty na współpracy i oparty na kolejkach, a nie na zapobieganiu.
Operacje asynchroniczne i pętla zdarzeń
Wiele interesujących operacji w popularnych środowiskach programowania JavaScript jest asynchronicznych. Na przykład w przeglądarce widzimy takie rzeczy
window.setTimeout(() => {
console.log("this happens later");
}, 100);
a w Node.js widzimy takie rzeczy jak
fs.readFile("file.txt", (err, data) => {
console.log("data");
});
Jak to pasuje do pętli zdarzeń?
Działa to tak, że po wykonaniu tych instrukcji informują środowisko hosta (tj. Odpowiednio przeglądarkę lub środowisko wykonawcze Node.js), aby się uruchomiły i zrobiły coś, prawdopodobnie w innym wątku. Gdy środowisko hosta wykona tę czynność (odpowiednio, czeka 100 milisekund lub odczytuje plik file.txt ), opublikuje zadanie w pętli zdarzeń, mówiąc: „wywołaj wywołanie zwrotne, które otrzymałem wcześniej z tymi argumentami”.
Pętla zdarzeń jest wtedy zajęta robieniem rzeczy: renderowaniem strony internetowej, nasłuchiwaniem danych wejściowych od użytkownika i ciągłym wyszukiwaniem opublikowanych zadań. Gdy zobaczy te opublikowane zadania w celu wywołania oddzwaniania, wróci do JavaScript. W ten sposób uzyskujesz zachowanie asynchroniczne!
