Czym jest funkcja zwrotna (callback) w JavaScript?

Funkcje zwrotne (callbacki) są fundamentem asynchronicznego programowania w JavaScript. Umożliwiają one opóźnienie wykonywania kodu do momentu, aż pewne warunki zostaną spełnione, co jest szczególnie przydatne w operacjach, które wymagają oczekiwania, takich jak żądania sieciowe, czytanie plików czy operacje na timerach. Funkcje te przekazywane są jako argumenty do innych funkcji i wykonane w odpowiednim momencie, co umożliwia tworzenie bardziej modułowego i reaktywnego kodu.

Przykład użycia funkcji zwrotnej

W tym przykładzie zobaczymy, jak możemy użyć funkcji zwrotnej do wykonania operacji asynchronicznej – symulacji żądania do serwera, które zwraca dane po pewnym czasie.

Kod HTML i JavaScript w jednym pliku
<!DOCTYPE html>
<html>
<head>
    <title>Przykład funkcji zwrotnej w JavaScript</title>
</head>
<body>

<button id="loadDataBtn">Załaduj dane</button>
<div id="dataContainer">Tutaj pojawią się dane...</div>

<script>
// Funkcja symulująca żądanie do serwera
function fetchData(callback) {
    setTimeout(() => {
        // Symulacja danych otrzymanych z serwera
        const data = 'Przykładowe dane z serwera';
        callback(data);
    }, 2000); // Oczekiwanie 2 sekundy przed 
              // wykonaniem callbacku
}

// Funkcja zwrotna, która aktualizuje UI
function updateUI(data) {
    const container = document.getElementById('dataContainer');
    container.textContent = data;
}

document.getElementById('loadDataBtn')
  .addEventListener('click', function() {
    fetchData(updateUI); // Przekazanie funkcji `updateUI` 
                         // jako callback
});
</script>

</body>
</html>

W powyższym przykładzie, funkcja fetchData symuluje asynchroniczne żądanie do serwera, używając setTimeout do opóźnienia wykonania. Funkcja zwrotna updateUI jest przekazywana do fetchData jako argument i jest wywoływana po zakończeniu symulowanego żądania, aktualizując interfejs użytkownika nowymi danymi.

Podsumowanie

Funkcje zwrotne są potężnym narzędziem w JavaScript, pozwalającym na efektywne zarządzanie operacjami asynchronicznymi. Umożliwiają one odroczenie wykonania pewnych części kodu do momentu, aż zostaną spełnione określone warunki, co jest niezbędne w środowisku przeglądarki, gdzie wiele operacji (np. żądania HTTP, interakcje z użytkownikiem) jest asynchronicznych. Dzięki funkcjom zwrotnym JavaScript pozwala na tworzenie interaktywnych i dynamicznych aplikacji webowych, które mogą reagować na działania użytkownika oraz inne zdarzenia w sposób płynny i naturalny.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Scroll to Top