Richiamate JavaScript
"Ti richiamerò più tardi!"
Un callback è una funzione passata come argomento a un'altra funzione
Questa tecnica consente a una funzione di chiamare un'altra funzione
Una funzione di callback può essere eseguita al termine di un'altra funzione
Sequenza di funzioni
Le funzioni JavaScript vengono eseguite nella sequenza in cui vengono chiamate. Non nella sequenza in cui sono definiti.
Questo esempio finirà per visualizzare "Goodbye":
Esempio
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
Questo esempio finirà per visualizzare "Hello":
Esempio
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
Controllo di sequenza
A volte vorresti avere un migliore controllo su quando eseguire una funzione.
Si supponga di voler eseguire un calcolo e quindi visualizzare il risultato.
È possibile chiamare una funzione calcolatrice ( myCalculator
), salvare il risultato e quindi chiamare un'altra funzione ( myDisplayer
) per visualizzare il risultato:
Esempio
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
Oppure puoi chiamare una funzione calcolatrice ( myCalculator
) e lasciare che la funzione calcolatrice chiami la funzione display ( myDisplayer
):
Esempio
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
Il problema con il primo esempio sopra è che devi chiamare due funzioni per visualizzare il risultato.
Il problema con il secondo esempio è che non è possibile impedire alla funzione calcolatrice di visualizzare il risultato.
Ora è il momento di richiamare.
Richiamate JavaScript
Un callback è una funzione passata come argomento a un'altra funzione.
Utilizzando una richiamata, è possibile chiamare la funzione calcolatrice ( myCalculator
) con una richiamata e lasciare che la funzione calcolatrice esegua la richiamata al termine del calcolo:
Esempio
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Nell'esempio sopra, myDisplayer
è il nome di una funzione.
Viene passato myCalculator()
come argomento.
Quando passi una funzione come argomento, ricorda di non usare le parentesi.
A destra: myCalculator(5, 5, myDisplayer);
Sbagliato:myCalculator(5, 5, myDisplayer());
Quando utilizzare una richiamata?
Gli esempi sopra non sono molto eccitanti.
Sono semplificati per insegnarti la sintassi della richiamata.
Dove i callback brillano davvero sono nelle funzioni asincrone, dove una funzione deve attendere un'altra funzione (come attendere il caricamento di un file).
Le funzioni asincrone sono trattate nel capitolo successivo.