Funkce zpětného volání JavaScriptu s příklady

Tento článek vysvětlí funkce zpětného volání v JavaScriptu – co to je, proč se používají a jak je používat.

Co je zpětné volání v programovacím jazyce JavaScript?

Funkce zpětného volání je funkce, která je předána jako parametr jiné funkci, která má být provedena z druhé funkce.

K čemu jsou zpětná volání užitečná?

Funkce zpětného volání se obvykle používají k provedení funkce, když byla dokončena jiná. To umožňuje snadné opětovné použití kódu.

Jedna funkce, která přijímá zpětné volání, může být použita vícekrát pro různé úkoly předáním jiného zpětného volání.

Například , můžete mít funkci, která zpracovává číslo s názvem processNumber() . Měl by vykonávat jednu ze dvou funkcí v závislosti na tom, zda je zpracovávané číslo liché nebo sudé. Tyto funkce lze poskytnout jako funkce zpětného volání funkce processNumber() a spouštěny z něj, spíše než duplikovat jejich kód.

Funkce zpětného volání se běžně používají k řetězení funkcí dohromady tak, že se jedna dokončí za druhou. Obecně se tedy předpokládá, že funkce zpětného volání se vždy provede, když funkce dokončí všechny ostatní úkoly.

Kde se používají funkce zpětného volání?

Funkce zpětného volání se používají ve vestavěných funkcích JavaScriptu a také v mnoha knihovnách dostupných online. Můžete také napsat své vlastní funkce pro přijímání zpětných volání.

Jsou užitečným nástrojem a stojí za to je poznat.

Příklad

Níže uvedu příklad použitý výše – předáním více zpětných volání do funkce, aby se odstranila duplicita kódu a umožnilo se řetězení funkcí.

// Define a function to process even numbers, to be called from the processNumber() function
function processEvenNumber(num){
    console.log("Number " + num + " is even!");
}

// Define a function to process odd numbers, to be called from the processNumber() function
function processOddNumber(num){
    console.log("Number " + num + " is odd!");   
}

// Define the function which will call either of the two above functions as callbacks
function processNumber(num, oddCallbackFunction, evenCallbackFunction){

    console.log("Processing number!");

    // Decide if num is odd or even using the % operator to get the remainder when num is divided by 2 - if the remainder is 0, it is even
    if(num % 2 == 0){
        // The callback function should be called using the name it is given as a parameter (evenCallbackFunction in this case) NOT the name the function was given when it was defined (processEvenNumber)
        evenCallbackFunction(num);
    } else {
        oddCallbackFunction(num);
    }

}

// Define an array (list) of numbers to test with
var testNumbers = [3, 6, 7, 9, 1, 2];

// Loop through testNumbers and run processNumber() on each of the numbers
testNumbers.forEach(function(num){

    // run processNumber() on each number in the testNumbers array
    processNumber(num, processOddNumber, processEvenNumber)

});

Co se tu tedy děje?

Nejprve jsou definovány dvě funkce:zpracování sudých a lichých čísel (processEvenNumber a processOddNumber ). Každý přijímá jeden parametr (číslo) a vytiskne jej spolu s trochou textu o tom, zda byl považován za lichý nebo sudý. Tyto dvě funkce budou později použity jako funkce zpětného volání .

Číslo processNumber funkce je pak definována. Přijímá 3 parametry – číslo ke zpracování a také dvě funkce zpětného volání . Zkontroluje, zda je číslo liché/sudé, a poté zavolá příslušnou funkci zpětného volání podle jména, které bylo zadáno jako parametr.

A forEach() smyčka se pak používá k procházení polem testovacích čísel.

V tomto příkladu byla použita dvě zpětná volání – můžete použít tolik nebo méně zpětných volání, kolik chcete.

Tento příklad ve skutečnosti neilustruje redukci kódu, jak se k demonstraci používají krátké funkce – je však snadné vidět, že kdyby byly funkce delší, došlo by k výraznému snížení množství napsaného kódu.

Stále zmatený? Více o funkcích zpětného volání JavaScriptu naleznete zde.