JavaScript asincrono

"I will finish later!"

Le funzioni che eseguono in parallelo con altre funzioni sono dette asincrone (asincrone)

Un ottimo esempio è JavaScript setTimeout()

JavaScript asincrono

L'esempio utilizzato nel capitolo precedente è stato notevolmente semplificato.

Lo scopo è dimostrare la sintassi del callback function:

Esempio

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

prova tu stesso

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

viene passato come parametro a myCalculator();。

Nel mondo reale, i callback vengono utilizzati più spesso insieme a funzioni asincrone.

Un esempio tipico è JavaScript setTimeout();。

Attendere il timeout

Quando si utilizza una funzione JavaScript, setTimeout(); Si può specificare la funzione di callback da eseguire al termine dell'intervallo di tempo:

Esempio

setTimeout(myFunction, 3000);
function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

prova tu stesso

Nell'esempio sopra,myFunction viene utilizzato come callback.

La funzione (nome della funzione) viene passata come parametro a setTimeout();。

3000 sono i millisecondi prima del timeout, quindi verrà chiamata dopo 3 secondi myFunction()。

Quando si passa una funzione come parametro, ricordarsi di non usare parentesi.

Corretto: setTimeout(myFunction, 3000);

Errore: setTimeout(myFunction(), 3000);

Se non si passa il nome della funzione come parametro a un'altra funzione, è sempre possibile passare l'intera funzione:

Esempio

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {}}
  document.getElementById("demo").innerHTML = value;
}

prova tu stesso

Nell'esempio sopra,function(){ myFunction("Mi piace te !!!"); } Utilizzato come callback. È una funzione completa. La funzione completa viene passata come parametro a setTimeout().

3000 sono i millisecondi prima del timeout, quindi verrà chiamata dopo 3 secondi myFunction()。

Attendere l'intervallo:

Quando si utilizza una funzione JavaScript, setInterval() Si può specificare la funzione di callback da eseguire ogni intervallo:

Esempio

setInterval(myFunction, 1000);
function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML=
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}

prova tu stesso

Nell'esempio sopra,myFunction usata come callback.

La funzione (nome della funzione) viene passata come parametro a setInterval()。

1000 sono i millisecondi tra intervalli, quindi myFunction() Eseguire una volta al secondo.

Attendere il file

Se crei una funzione per caricare risorse esterne (come script o file), non puoi utilizzare queste risorse prima che il contenuto sia completamente caricato.

È il momento migliore per utilizzare callback.

In questo esempio si carica un file HTML (mycar.htmle visualizzare il file HTML completo nella pagina web:

Attendere il 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);
    }
      myCallback("Errore: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

prova tu stesso

Nell'esempio sopra,myDisplayer usata come callback.

La funzione (nome della funzione) viene passata come parametro a getFile()。

Di seguito è riportato: mycar.html copia di:

mycar.html

<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>Un'automobile è un veicolo a ruote, autoalimentato e motorizzato utilizzato per il trasporto.</p>
<p>La maggior parte delle definizioni del termine specifica che le automobili sono progettate per circolare principalmente su strade, con un numero di posti da uno a otto persone, e tipicamente con quattro ruote.</p>
<p>(Wikipedia)</p>