Jak działa funkcja setTimeout w JavaScript?

setTimeout planuje wykonanie funkcji lub fragmentu kodu po określonej liczbie milisekund.

Po wywołaniu setTimeout przeglądarka (lub środowisko wykonawcze Node.js) tworzy timer. Funkcja przekazana do setTimeout jest umieszczana w kolejce zadań (task queue) po upływie określonego czasu opóźnienia.

JavaScript jest jednowątkowy. Główny wątek wykonawczy (main thread) wykonuje kod sekwencyjnie. Gdy główny wątek kończy bieżące zadania, sprawdza kolejkę zadań. Jeśli w kolejce znajdują się funkcje (np. te odłożone za pomocą setTimeout) i główny wątek jest wolny, wyciąga i wykonuje pierwszą funkcję z kolejki.

Oznacza to, że setTimeout(fn, 0) nie gwarantuje natychmiastowego wykonania funkcji fn. Zostanie ona wykonana tak szybko, jak to możliwe, ale dopiero po zakończeniu bieżącego kodu w głównym wątku.

Składnia:

setTimeout(function, milliseconds, param1, param2, ...);

• function: Funkcja, którą chcemy wykonać.
• milliseconds: Liczba milisekund przed wykonaniem funkcji. Jeśli pominięte, domyślnie 0.
• param1, param2, ...: Opcjonalne argumenty, które zostaną przekazane do funkcji podczas jej wywołania.

Przykład:

// Wyświetli "Cześć!" po 2 sekundach
setTimeout(function() {
  console.log("Cześć!");
}, 2000);

// Przekazywanie argumentów
function pokazWiadomosc(imie) {
  console.log("Cześć, " + imie + "!");
}

setTimeout(pokazWiadomosc, 1000, "Świecie"); // Wyświetli "Cześć, Świecie!" po 1 sekundzie

setTimeout zwraca numerowe ID timera, które można wykorzystać do anulowania zaplanowanego wykonania za pomocą clearTimeout.

Przykład użycia clearTimeout:

let timerId = setTimeout(function() {
  console.log("Ta linia nie zostanie wyświetlona");
}, 3000);

console.log("Timer uruchomiony...");

// Anulujemy timer
clearTimeout(timerId);

console.log("Timer anulowany.");

Ważne punkty:

• Opóźnienie nie jest gwarantowane dokładnie, szczególnie przy dużym obciążeniu głównego wątku. Podana wartość to minimalny czas opóźnienia przed umieszczeniem funkcji w kolejce zadań.
• W Node.js timery są zarządzane przez pętlę zdarzeń (event loop), podobnie jak w przeglądarce.