Funkcje zwrotne (callback) w JavaScript

W JavaScript programiści definiują jednostki kodu – zmienne i funkcje. Funkcje mogą przyjmować parametry, a wywołujący przekazuje im wartości lub zmienne. Dodatkowo można jako argument przekazać odwołanie do innej funkcji. Taka funkcja zwrotna (callback) jest wywoływana po zakończeniu działania innej funkcji, dlatego najczęściej pojawia się jako parametr.

Definicja callbacka

Najpierw należy zdefiniować funkcję, którą później przekażemy jako parametr. Przykład:

var callbackDefinition = function(numParam) { alert(numParam); };

Funkcja przyjmuje jeden parametr numeryczny i wyświetla go w oknie alertu. Może zawierać dowolny kod JavaScript, tak jak zwykła funkcja.

Przekazywanie jako parametr

Kiedy funkcja jest już przypisana do zmiennej, możemy przekazać tę zmienną do innej funkcji:

mainFunction(10, callbackDefinition);

W wywołaniu przekazujemy liczbę oraz referencję do funkcji callback. Funkcja przyjmująca callback musi przyjąć dwa argumenty – wartość i funkcję.

Wykonanie funkcji zwrotnej

Wewnątrz funkcji przyjmującej callback możemy ją wywołać:

function mainFunction(myNum, callbackFn) { alert(myNum); callbackFn(myNum * 2); }

Najpierw wyświetlamy przekazaną liczbę, a potem wywołujemy funkcję zwrotną, podając jako argument podwojoną wartość.

Wywołanie z poziomu strony

Po zdefiniowaniu funkcji i callbacka możemy uruchomić je w odpowiedzi na zdarzenie, np. kliknięcie przycisku:

<button onclick=\"doCallback()\">Kliknij mnie</button>

Skrypt:

function doCallback() { var callFn = function(numParam) { alert(numParam); }; mainFunction(10, callFn); }

Po kliknięciu przycisku funkcja mainFunction zostanie wywołana, a w jej wnętrzu – funkcja zwrotna, co ilustruje efekt callback.