Istnieją dwa (najczęściej używane) typy funkcji timera w javascript setTimeouti setInterval( inne )
Obie te metody mają ten sam podpis. Jako parametr przyjmują funkcję oddzwaniania i czas opóźnienia.
setTimeoutwykonuje tylko raz po opóźnieniu, podczas gdy setIntervalwywołuje funkcję zwrotną po każdych milisekach opóźnienia.
obie te metody zwracają identyfikator w postaci liczby całkowitej, którego można użyć do wyczyszczenia ich przed upływem czasu.
clearTimeouti clearIntervalobie te metody pobierają identyfikator całkowity zwrócony z powyższych funkcji setTimeoutisetInterval
Przykład:
setTimeout
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");
Jeśli uruchomisz powyższy kod, zobaczysz, że ostrzega, before setTimeouta następnie after setTimeoutostrzega I am setTimeoutpo 1 sek. (1000 ms)
Z przykładu można zauważyć, że setTimeout(...)jest asynchroniczny, co oznacza, że nie czeka na upłynięcie licznika czasu przed przejściem do następnej instrukcji, tj.alert("after setTimeout");
Przykład:
setInterval
alert("before setInterval"); //called first
var tid = setInterval(function(){
//called 5 times each time after one second
//before getting cleared by below timeout.
alert("I am setInterval");
},1000); //delay is in milliseconds
alert("after setInterval"); //called second
setTimeout(function(){
clearInterval(tid); //clear above interval after 5 seconds
},5000);
Jeśli uruchomisz powyższy kod, zobaczysz, że ostrzega, before setIntervala następnie after setIntervalostrzega I am setInterval 5 razy po 1 sek. (1000 ms), ponieważ setTimeout czyści licznik czasu po 5 sekundach lub co 1 sekundę otrzymasz alert I am setIntervalNieskończenie.
Jak przeglądarka to robi wewnętrznie?
Krótko wyjaśnię.
Aby zrozumieć, że musisz wiedzieć o kolejce zdarzeń w javascript. W przeglądarce zaimplementowano kolejkę zdarzeń. Za każdym razem, gdy zdarzenie zostanie wyzwolone w js, wszystkie te zdarzenia (takie jak kliknięcie itp.) Są dodawane do tej kolejki. Kiedy Twoja przeglądarka nie ma nic do wykonania, pobiera zdarzenie z kolejki i wykonuje je jedno po drugim.
Teraz, gdy zadzwonisz setTimeoutlub setIntervaltwój callback zostanie zarejestrowany do licznika czasu w przeglądarce, zostanie on dodany do kolejki zdarzeń po upływie określonego czasu i ostatecznie javascript pobierze zdarzenie z kolejki i wykonuje je.
Dzieje się tak, ponieważ silnik javascript jest jednowątkowy i może wykonywać tylko jedną rzecz naraz. Dlatego nie mogą wykonywać innych skryptów javascript i śledzić Twojego timera. Dlatego te timery są rejestrowane w przeglądarce (przeglądarka nie jest jednowątkowa) i może śledzić licznik czasu i dodawać zdarzenie do kolejki po jego wygaśnięciu.
to samo dzieje się setIntervaltylko w tym przypadku, gdy zdarzenie jest ponownie dodawane do kolejki po określonym czasie, aż zostanie wyczyszczone lub odświeżona strona przeglądarki.
Uwaga
Parametr opóźnienia przekazany do tych funkcji to minimalny czas opóźnienia wykonania wywołania zwrotnego. Dzieje się tak, ponieważ po wygaśnięciu licznika czasu przeglądarka dodaje zdarzenie do kolejki do wykonania przez silnik javascript, ale wykonanie wywołania zwrotnego zależy od pozycji Twoich zdarzeń w kolejce, a ponieważ silnik jest jednowątkowy, wykona wszystkie zdarzenia w kolejka jeden po drugim.
W związku z tym wywołanie zwrotnego wywołania zwrotnego może czasami zająć więcej niż określony czas opóźnienia, aby zostać wywołanym specjalnie, gdy inny kod blokuje wątek i nie daje czasu na przetworzenie tego, co jest w kolejce.
A jak wspomniałem, javascript to pojedynczy wątek. Tak więc, jeśli długo blokujesz wątek.
Jak ten kod
while(true) { //infinite loop
}
Twój użytkownik może otrzymać komunikat informujący, że strona nie odpowiada .
setTimeout(function(){/*YourCode*/},1000);