JavaScript asincrono
"Finirò più tardi!"
Le funzioni eseguite in parallelo con altre funzioni sono dette asincrone
Un buon esempio è JavaScript setTimeout()
JavaScript asincrono
Gli esempi utilizzati nel capitolo precedente sono stati molto semplificati.
Lo scopo degli esempi era quello di dimostrare la sintassi delle funzioni di callback:
Esempio
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
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.
Nel mondo reale, i callback vengono spesso utilizzati con funzioni asincrone.
Un tipico esempio è JavaScript setTimeout().
In attesa di un timeout
Quando si utilizza la funzione JavaScript setTimeout(), è possibile specificare una funzione di callback da eseguire in timeout:
Esempio
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
Nell'esempio sopra, myFunctionviene utilizzato come callback.
myFunctionviene passato setTimeout()come argomento.
3000 è il numero di millisecondi prima del timeout, quindi
myFunction()verrà chiamato dopo 3 secondi.
Quando passi una funzione come argomento, ricorda di non usare le parentesi.
A destra: setTimeout(myFunction, 3000);
Sbagliato:setTimeout(miaFunzione(), 3000);
Invece di passare il nome di una funzione come argomento a un'altra funzione, puoi sempre passare un'intera funzione:
Esempio
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Nell'esempio sopra, function(){ myFunction("I love You !!!"); }
viene utilizzato come callback. È una funzione completa. La funzione completa viene passata a setTimeout() come argomento.
3000 è il numero di millisecondi prima del timeout, quindi
myFunction()verrà chiamato dopo 3 secondi.
Intervalli di attesa:
Quando si utilizza la funzione JavaScript setInterval(), è possibile specificare una funzione di callback da eseguire per ogni intervallo:
Esempio
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
Nell'esempio sopra, myFunctionviene utilizzato come callback.
myFunctionviene passato setInterval()come argomento.
1000 è il numero di millisecondi tra gli intervalli, quindi
myFunction()verrà chiamato ogni secondo.
In attesa di file
Se crei una funzione per caricare una risorsa esterna (come uno script o un file), non puoi utilizzare il contenuto prima che sia stato caricato completamente.
Questo è il momento perfetto per utilizzare una richiamata.
Questo esempio carica un file HTML ( mycar.html) e visualizza il file HTML in una pagina Web, dopo che il file è stato completamente caricato:
In attesa di un file:
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
myCallback(this.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
Nell'esempio sopra, myDisplayerviene utilizzato come callback.
myDisplayerviene passato getFile()come argomento.
Di seguito una copia di mycar.html:
la mia auto.html
<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads,
to have seating for one to eight people, to typically have four wheels.</p>
<p>(Wikipedia)</p>