Autor: Codenga 12.01.2024

W języku JavaScript często pisze się tzw. kod asynchroniczny. To ciekawy i jednocześnie dość złożony temat. Na sam początek warto opanować wbudowane funkcje setTimeout() oraz setInterval(). Ich zrozumienie będzie pierwszym krokiem do opanowania asynchroniczności w JavaScript. W tym artykule przedstawimy mechanizm działania tych funkcji z użyciem prostych przykładów.

Opanuj najważniejszy język współczesnej sieci Web. Zdobądź umiejętności niezbędne aby zostać front-end developerem.

Dowiedz się więcej

Jak działa setTimeout

Funkcja setTimeout() pozwala na opóźnienie wykonania wskazanej funkcji. Odroczenie wykonania funkcji podajemy w milisekundach. Popatrz na przykład:

console.log("Start");
setTimeout(function() {
    console.log("After 2 seconds...");
}, 2000);
    
console.log("Stop"); 

Rezultat działania skryptu jest następujący:

Start
Stop
After 2 seconds...

Kod, który znajduje się wewnątrz setTimeout() wykona się dopiero po 2 sekundach od wczytania całego skryptu (2000ms = 2sek). Mamy więc prosty sposób na to, aby opoźnić wykonanie naszej funkcji.

Jak działa setInterval()

Funkcja setInterval() pozwala na cykliczne wywołanie pewnej funkcji. Cykliczne wywołanie funkcji mierzymy w milisekundach. Popatrz na przykład:

console.log("Start");
setInterval(function() {
    console.log("Every 2 seconds...");
}, 2000);
    
console.log("Stop");

Rezultat działania skryptu jest następujący:

Start
Stop
Every 2 seconds...
Every 2 seconds...
Every 2 seconds...
...

Od załadowania całego skryptu, funkcja setInterval() wykonuje się cyklicznie co 2 sekundy.

Jak działa clearInterval()

Można okiełznać funkcję setInterval() i ograniczyć jej cykliczne wywołania. W przeciwnym wypadku funkcja będzie się wykonywała w nieskończoność.

Skorzystaj z funkcji clearInterval(), aby kontrolować cykliczność funkcji setInterval(). Spójrz, jak można ograniczyć cykle naszej funkcji do 3:

console.log("Start");
let counter = 0;
let id = setInterval(function() {
    counter = counter + 1;
    console.log("Every 2 seconds...");
        
    if(counter == 3) {
        clearInterval(id);
    }
        
}, 2000);
    
console.log("Stop"); 

Rezultat działania skryptu jest następujący:

Start
Stop
Every 2 seconds...
Every 2 seconds...
Every 2 seconds...    

Dzięki funkcji clearInterval() możemy zakończyć działanie funkcji cyklicznej w dowolnym momencie. Wystarczy przekazać do funkcji odpowiedni identyfikator setInterval().

Opanuj najważniejszy język współczesnej sieci Web. Zdobądź umiejętności niezbędne aby zostać front-end developerem.

Dowiedz się więcej

Podsumowanie

Mamy nadzieję, że po lekturze tego artykułu wiesz już jak działają podstawowe funkcje asynchroniczne w języku JavaScript.