Il preferito di tutti: tempo di video di concetto! I callback sono un concetto importante in JavaScript. Sono funzioni che vengono chiamate quando un'azione è stata completata. Quindi presta struttura e tempistica al nostro codice.
Prendi ad esempio l'animazione che abbiamo usato nell'ultimo video. Le animazioni richiedono tempo per essere eseguite. E se vuoi che accada qualcos'altro proprio quando l'animazione finisce? Devi fare una setTimeoutper la stessa durata dell'animazione? No. jQuery ci fornisce funzioni di callback usate solo per quello scopo.
In genere sono un parametro aggiuntivo che passiamo al metodo. Nel caso dell'animazione, passiamo una funzione come ultimo parametro. Questa è la funzione di callback e verrà chiamata quando l'animazione sarà completa.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Forse sembra un po 'strano, ma essenzialmente stiamo solo facendo:
.animate(a, b)Where aè un oggetto di proprietà e valori ed bè una funzione di callback.
Ma sappiamo dall'ultimo video che l'animazione può anche richiedere un parametro di temporizzazione che specifica quanto tempo impiegherà un'animazione. Dove va? Questo è un parametro opzionale, proprio come lo è la funzione di callback. Se volessimo usarlo, lo metteremmo nel mezzo, quindi essenzialmente:
.animate(propertiesObject, duration, callback);E c'è anche un altro parametro opzionale, una stringa che possiamo passare per specificare un valore di andamento.
.animate(propertiesObject, duration, easing, callback);jQuery sembra essere carino e intelligente su questi parametri opzionali. Se lasci fuori i due centrali e passi la richiamata, può dire che ciò che stai passando è una funzione, non un numero o una stringa, quindi sa che intendi una funzione di richiamata. Non devi passare valori fasulli o altro. Questo è solo un buon design API!
Quando guardi la documentazione di jQuery, lo mostrano in questo modo:
.animate (proprietà (, duration) (, easing) (, complete))
Poi subito dopo spiegare i tipi attesi.
Ma comunque, torniamo ai callback. Puoi diventare piuttosto annidato. Immagina di inserire un'altra animazione nella funzione di callback e quell'animazione ha il suo callback. È perfettamente ragionevole, dato che potresti voler fare un'animazione in più passaggi. Hai solo bisogno di rimanere organizzato.
Guarda la penna 450c5810be27a9a8946cb8012cbd1213 di Chris Coyier (@chriscoyier) su CodePen
Stiamo solo usando l'animazione come esempio qui. Forse un uso ancora più comune delle funzioni di callback è Ajax. Ajax è quando il browser chiama un'altra risorsa senza aggiornare la pagina. Ciò può richiedere una quantità di tempo completamente sconosciuta. Dipende dalla larghezza di banda e dalla latenza, dalla dimensione del file, dalle condizioni di errore e da tutti i tipi di cose. Probabilmente non puoi fare nulla con quella richiesta Ajax finché non ottieni qualcosa in cambio o altre informazioni. Le funzioni di callback sono perfette per questo, e ne parleremo più avanti.