Nasza strona używa cookies. Korzystając ze strony, wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki. Rozumiem

Jak działa setTimeout i setInterval w JavaScript

Kudzanayi Dzvairo Software Engineer / Dollaride
Sprawdź, jak możesz uzyskać asynchroniczny kod w JavaScript, wykorzystując do tego metody setTimeout i setInterval.
Jak działa setTimeout i setInterval w JavaScript

Kod JavaScript jest z reguły wykonywany w sposób synchroniczny. Może się jednak zdarzyć, że daną funkcję będzie trzeba wywołać później. I tutaj przychodzi nam z pomocą setInterval oraz setTimeout.



setTimeout wywołuje funkcję po określonym czasie opóźnienia.

setInterval wywołuje funkcję w określonych, regularnych interwałach. 


setTimeout()

setTimeout(function, timeout);

 

setTimeout oczekuje dwóch argumentów, jednej referencji do funkcji wywołania zwrotnego oraz opóźnienia w milisekundach. 

function goOffEverySecond() {
     alert('Another one')
}

setTimeout(goOffEverySecond, 1000);// Another one


setTimeout może również akceptować argumenty po opóźnieniu, a dodatkowe wartości zostaną przekazane do funkcji wywołania zwrotnego. 

function sayHello(message, person) {
    alert(message + ', '+ person);
}

setTimeout(sayHello, 1000, "This works", "reader"); // This works reader


Timer można wyłączyć przy użyciu metody clearTimeout.

function goOffEverySecond() {
     alert('Another one')
}

const timer = setTimeout(goOffEverySecond, 1000)

setTimeout(()=> {
    clearTimeout(timer)
}, 2000);


Czasami można spotkać się z techniką wywołania kodu JavaScript za pośrednictwem setTimeout z opóźnieniem wynoszącym 0ms. Umożliwia to natychmiastowe dodanie kodu z setTimeout do listy komunikatów do wykonania, w momencie, w którym obecny kod synchroniczny oraz poprzednia wiadomość z kolejki zakończyły swoje działanie, sprawiając, że kod uruchomiony z setTimeout jest asynchroniczny.

setTimeout(() => {
  console.log('Lion');
}, 0);

console.log('kitty');

// kitty
// Lion


Powyższe może się przydać przy opóźnianiu zadań, które mogą spowalniać programowanie oraz blokować następne funkcje. Pamiętajmy, że setTimeout ustawia jedynie minimalny czas, który musi minąć przed wywołaniem. Jeśli silnik jest zajęty czymś innym, to kod może być uruchomiony znacznie później. Co więcej, wartość 0 nie musi być deklarowana - będzie ona domyślna nawet jeśli się ją pominie. 


setInterval

setInterval to prawie to samo, co setTimeout. Metoda ta jest używana do powtarzalnego uruchamiania funkcji (trochę jak w animacjach).

setInterval(function, interval)


Różnica między setTimeout i setInterval polega na tym, że metoda setTimeout() uruchamia wyrażenie tylko raz, a setInterval() robi to regularnie po określonym czasie.

let i = 0 

function increment() {
       i++
        console.log(i)
}

setInterval(increment, 1000)

//1
//2
//3
//...


Rekurencyjne wywołania setTimeout

Czasami lepsze może się okazać użycie rekurencyjnego setTimeout zamiast setInterval. Po pierwsze, jeśli zadania wykonywane w ramach timera zajmują dużo czasu, użycie setInterval może oznaczać, że zadania nie będą miały opóźnienia między sobą. A to dlatego, że opóźnienie wykonania jest liczone od momentu uruchomienia zadania, a nie od jego końca. 

Jeśli zamiast tego użyjesz rekurencyjnego timera setTimeout, to będziesz mieć pełną kontrolę nad początkiem opóźnienia. Oto przykład rekurencyjnego wywołania setTimeout:

let i = 0;  

function increment() {
   i++;   
   console.log(i); 
}  

let timer = setTimeout(function myTimer() {  
   increment();    
   timer = setTimeout(myTimer, 1000); 
}, 1000);

setTimeout(() => {   
console.log('Cancelling');  
 clearTimeout(timer); }, 7000);


Za każdym razem ponownie przypisujemy wartość timera, aby w razie potrzeby móc go anulować.

Oryginał tekstu w języku angielskim możesz przeczytać tutaj.


Jeśli masz jakieś przemyślenia na temat powyższego tekstu, podziel się nimi w komentarzu
👇

Rozpocznij dyskusję

Lubisz dzielić się wiedzą i chcesz zostać autorem?

Podziel się wiedzą z 160 tysiącami naszych czytelników

Dowiedz się więcej