Callback JavaScript

"Chiamerò più tardi!"

Il callback (callback) è una funzione passata come parametro a un'altra funzione

Questa tecnica permette a una funzione di chiamare un'altra funzione

Le funzioni di callback possono essere eseguite dopo che un'altra funzione è stata completata

Sequenza delle funzioni

Le funzioni JavaScript vengono eseguite nell'ordine in cui vengono chiamate, non nell'ordine in cui vengono definite.

Questo esempio finale visualizzerà "Arrivederci":

esempio

function myFirst() {
  myDisplayer("Ciao");
}
function mySecond() {
  myDisplayer("Ciao");
}
myFirst();
mySecond();

Provatelo voi stessi

Questo esempio finale visualizzerà "Ciao":

esempio

function myFirst() {
  myDisplayer("Ciao");
}
function mySecond() {
  myDisplayer("Ciao");
}
mySecond();
myFirst();

Provatelo voi stessi

Controllo dell'ordine

A volte desideri controllare meglio quando eseguire una funzione.

Supponiamo di dover effettuare un calcolo e visualizzare i risultati.

Puoi chiamare la funzione del calcolatore (myCalculator) e salvare i risultati, quindi chiamare un'altra funzione (myDisplayer) per visualizzare i risultati:

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);

Provatelo voi stessi

O puoi chiamare la funzione del calcolatore (myCalculator) e far chiamare la funzione di visualizzazione dal calcolatore (myDisplayer) :

esempio

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
  let sum = num1 + num2;
  myDisplayer(sum);
}
myCalculator(5, 5);

Provatelo voi stessi

Il problema del primo esempio è che devi chiamare due funzioni per visualizzare i risultati.

Il problema del secondo esempio è che non puoi impedire al calcolatore di visualizzare i risultati.

È il momento di introdurre il callback.

Callback JavaScript

Il callback è una funzione passata come parametro a un'altra funzione.

Utilizzando il callback, puoi chiamare la funzione del calcolatore tramite il callback (myCalculatore, una volta completato il calcolo, far eseguire la funzione di callback del calcolatore:

esempio

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

Provatelo voi stessi

Nell'esempio sopra, myDisplayer È il nome della funzione.

Passa come parametro a myCalculator().

Quando passate una funzione come parametro, ricordate di non utilizzare parentesi.

Corretto: myCalculator(5, 5, myDisplayer);

Errore: myCalculator(5, 5, myDisplayer());

Quando utilizzare i callback?

L'esempio sopra non è molto emozionante.

Sono stati semplificati per spiegare la sintassi dei callback.

La vera gloria dei callback è nelle funzioni asincrone, in cui una funzione deve aspettare un'altra funzione (ad esempio, aspettare il caricamento di un file).

Il prossimo capitolo introdurrà le funzioni asincrone.