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 ?