Richiamata in Javascript – ES6

Preludio

Ciao! Sono Samee. Il mio background è di informatica e adoro la tecnologia. Compongo vari esercizi didattici tecnologici / di programmazione (anche su YouTube) e rivedo software / hardware / prodotti ed eventi di tecnologia di copertura (beh, a volte). Se non hai domande su questo articolo, lascia un commento e ti colpirò o scoprirò su Twitter SameeHsn.

Che cos’è un callback?

Fondamentalmente: un callback è una funzione che verrà eseguita dopo che un’altra funzione ha completato l’esecuzione – da qui il nome ‘torna indietro’ o ‘callback’.

Tanto più in modo impressionante: in JavaScript, le funzioni sono oggetti. Lungo queste linee, le funzioni possono accettare le opere come contese e possono essere restituite da diverse funzioni. le funzioni che lo fanno sono chiamate funzioni di disposizione superiore. Qualsiasi funzione passata come contesa è nota come lavoro di callback.

Questa è una raccolta di parole aliene. Diamo un’occhiata ad alcune guide per separare un po ‘di più.

Per quale motivo sono necessari i callback?

Per un motivo imperativo: JavaScript è un dialetto guidato dalle occasioni. Ciò implica invece di essere pronto per una reazione prima di procedere, JavaScript continuerà a essere eseguito mentre allo stesso tempo sintonizzarsi per diverse occasioni. Diamo un’occhiata a un modello essenziale:

 function first (){ 
console.log(1);
}
(){
console.log(1);
}
  function second (){ 
console.log(2);
}
(){
console.log(2);
}
 first(); 
second();

Come ci si aspetterebbe, inizialmente la funzione viene eseguita per prima e la seconda funzione viene eseguita per seconda, registrando l’accessorio per il comfort:

  // 1 
// 2

Tutto bene fino a questo punto.

Tuttavia, immagina uno scenario in cui il lavoro inizialmente contiene un tipo di codice che non può essere eseguito prontamente. Ad esempio, un’API chiede dove è necessario inviare la domanda a quel punto in attesa di una reazione? Per riprodurre questa attività, utilizzare setTimeout che è un lavoro JavaScript che chiama una funzione dopo un determinato intervallo di tempo. Rimanderemo la nostra funzione per 500 millisecondi per ricreare una richiesta API. Il nostro nuovo codice sarà simile a questo:

  function first (){ 
(){
// Simula un ritardo del codice
setTimeout (function () {
console.log(1);
}, 500);
}
  function second (){ 
console.log(2);
}
(){
console.log(2);
}
 first(); 
second();

Non è indispensabile vedere come setTimeout () funzioni in questo momento. L’unica cosa importante è che vedi che abbiamo spostato il nostro console.log (1); entro il nostro ritardo di 500 millisecondi. Cosa succede ora quando evochiamo la nostra funzione?

  primo(); 
secondo();
  // 2 
// 1

Nonostante il fatto che abbiamo convocato prima il lavoro principale (), abbiamo disconnesso le conseguenze di quel lavoro dopo il secondo lavoro ().

Non è tanto che JavaScript non ha eseguito le nostre funzioni nella richiesta di cui avevamo bisogno, è piuttosto che JavaScript non si è stretto per una reazione da first () prima di procedere con l’esecuzione di second ().

Quindi perché dimostrarti questo? Dal momento che non puoi semplicemente chiamare una funzione dopo l’altra e fidarti che vengano eseguite in modo appropriato. I callback sono un approccio per garantire che determinati codici non vengano eseguiti fino al momento in cui altri codici hanno effettivamente completato l’esecuzione.

Effettua una richiamata

Va bene, basta parlare, facciamo una richiamata!

Per cominciare, apri la tua Console per gli sviluppatori di Chrome (Windows: Ctrl + Shift + J) (Mac: Cmd + Opzione + J) e digita la funzione di accompagnamento affermazione a tuo agio:

  funzione doHomework (soggetto) { 
alert (`Iniziare i miei compiti $ {subject }.`);
}

Sopra, abbiamo creato la funzione doHomework. La nostra funzione prende una variabile, l’argomento a cui stiamo lavorando. Chiama la tua funzione componendo l’accompagnamento nel tuo supporto:

  doHomework ( 'matematica'); 
  // Avvisi: iniziare i compiti di matematica. 

Attualmente include include l’accesso al nostro callback – poiché il nostro ultimo parametro nel lavoro di doHomework () possiamo andare nel callback. Il lavoro di callback è quindi caratterizzato nella seconda contesa della nostra chiamata a doHomework ().

  funzione doHomework (subject , callback ) { 
alert (`Iniziare i miei compiti $ {subject }.`);
richiama();
}

doHomework ('math' , function () {
alert ('Ho finito i compiti');
} );

Come vedrai, nel caso in cui tu digiti il ​​codice sopra nella tua rassicurazione, otterrai due allarmi consecutivi: la tua attenzione “inizio compiti”, seguita dall’allarme “compiti completati”.

Comunque sia, la funzione di callback non deve generalmente essere caratterizzata nella nostra chiamata di funzione. Possono essere caratterizzati altrove nel nostro codice in questo modo:

  funzione doHomework (subject, callback) { 
alert (`Iniziare i miei compiti $ {subject }.`);
richiama();
}
  function alertFinished () { 
alert ('Ho finito i compiti');
}
  doHomework ('math', alertFinished); 

Questa conseguenza di questo modello è in realtà equivalente al precedente precedente, tuttavia l’installazione è alquanto straordinaria. Come dovrebbe essere ovvio, abbiamo passato la definizione di lavoro alertFinished come contesa tra la nostra chiamata di lavoro doHomework ()!

Mappatura di esempio del mondo reale con Twitter

Quando si effettua una richiesta all’API di Twitter, è necessario attendere attentamente la reazione prima di poter dare seguito a tale reazione. Questo è un brillante caso di richiamata certificabile. Questo è ciò che assomiglia alla domanda:

  T.get ("ricerca / tweet", parametri, funzione (err, dati, risposta) { 
if (! err) {
// Qui è dove accadrà la magia
} altro {
console.log (err);
}
}) T.get solo metodi che stiamo facendo una richiesta motivata a Twitter

Ci sono tre parametri in questa richiesta: ‘look / tweets’, che è il corso della nostra domanda, parametri che sono i nostri parametri di caccia, e successivamente una funzione sconosciuta che è il nostro callback.

Un callback è di vitale importanza qui alla luce del fatto che dobbiamo impegnarci per una reazione dal server prima di poter proseguire nel nostro codice. Non sappiamo se la nostra richiesta dell’API sarà efficace o meno a seguito dell’invio dei nostri parametri per cercare / tweet attraverso una richiesta di ottenere, facciamo una pausa. Quando Twitter reagisce, viene convocato il nostro lavoro di callback. Twitter ci invierà un oggetto errato o un oggetto di reazione. Nel nostro lavoro di callback possiamo utilizzare un annuncio nel caso in cui l’annuncio () per decidere se la nostra richiesta fosse fruttuosa o meno, e dare seguito alle nuove informazioni secondo necessità.

Congratulazioni! L’hai fatta!!

Ottimo lavoro! Ora puoi (preferibilmente) comprendere cos’è un callback e come funziona. Questo è solo un assaggio di un problema più grande con i callback, c’è ancora molto altro da imparare!

Iscriviti al mio canale YouTube per materiale tecnico / tecnico: SameeVPN

Twitter : @sameevpn

Un ringraziamento speciale a CodeBurst.io per l’aiuto materiale per questo tutorial.