Asynchronous JavaScript

"Ik zal later klaar zijn!"

Functies die parallel met andere functies worden uitgevoerd, worden asynchrone (asynchronous) genoemd

Een goed voorbeeld is JavaScript setTimeout()

Asynchrone JavaScript

De voorbeelden die in het vorige hoofdstuk zijn gebruikt, zijn aanzienlijk vereenvoudigd.

Het doel is om de syntaxis van callback-functies te demonstreren:

Voorbeeld

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

Probeer het zelf uit

kan je de callback-functie op elke interval specificeren：myDisplayer is de naam van de functie.

wordt als parameter doorgegeven aan myCalculator();。

In de werkelijkheid worden callbacks meestal samen met asynchrone functies gebruikt.

Een typisch voorbeeld is JavaScript setTimeout();。

Wachten op timeout

Bij het gebruik van JavaScript-functies setTimeout(); bijvoorbeeld, kun je de callback-functie die na de timeout wordt uitgevoerd specificeren:

Voorbeeld

setTimeout(myFunction, 3000);
function myFunction() {
  document.getElementById("demo").innerHTML = "Ik hou van je !!";
}

Probeer het zelf uit

In het voorbeeld hierboven,In het bovenstaande voorbeeld, wordt gebruikt als callback.

De functie (functienaam) wordt doorgegeven als parameter aan setTimeout();。

3000 is het aantal milliseconden voordat de timeout optreedt, dus na 3 seconden wordt er aangeroepen 1000 is het aantal milliseconden tussen de intervallen, dus。

Wanneer je een functie als parameter doorgeeft, onthoud dan geen haakjes te gebruiken.

Correct: setTimeout(myFunction, 3000);

Fout: setTimeout(myFunction(), 3000);

Als je de naam van de functie niet als parameter aan een andere functie doorgeeft, kun je altijd de hele functie doorgeven:

Voorbeeld

setTimeout(function() { myFunction("Ik hou van je !!!"); }, 3000);
function myFunction(value) {}}
  document.getElementById("demo").innerHTML = value;
}

Probeer het zelf uit

kan je de callback-functie op elke interval specificeren：function(){ myFunction("Ik hou van je !!!"); } wordt gebruikt als callback. Het is een volledige functie. Een volledige functie wordt als parameter doorgegeven aan setTimeout().

3000 is het aantal milliseconden voordat de timeout optreedt, dus na 3 seconden wordt er aangeroepen 1000 is het aantal milliseconden tussen de intervallen, dus。

Wachtintervallen：

Bij het gebruik van JavaScript-functies myFunction kan je de callback-functie op elke interval specificeren：

Voorbeeld

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

Probeer het zelf uit

kan je de callback-functie op elke interval specificeren：In het bovenstaande voorbeeld, gebruikt als callback.

De functie (functienaam) wordt doorgegeven als parameter aan myFunction。

setInterval() 1000 is het aantal milliseconden tussen de intervallen, dus myFunction()

wordt elke seconde aangeroepen.

Wachtend op het bestand

Als je functies maakt om externe bronnen (zoals scripts of bestanden) te laden, kun je deze inhoud niet gebruiken voordat deze volledig is geladen.

Dit is de beste tijd om callbacks te gebruiken.mycar.html)，en toon dit HTML-bestand in de pagina zodra het volledig is geladen：

Wachtend op het bestand：

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

Probeer het zelf uit

In het voorbeeld hierboven,myDisplayer gebruikt als callback.

De functie (functienaam) wordt doorgegeven als parameter aan getFile()。

Hieronder is mycar.html van een kopie:

mycar.html

<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>Een auto is een wielgedreven, zelfgepowerde motorvoertuig gebruikt voor vervoer.</p>
<p>De meeste definities van het begrip specificeren dat auto's zijn ontworpen om voornamelijk op wegen te rijden, met zitplaatsen voor één tot acht personen, en meestal vier wielen.</p>
<p>(Wikipedia)</p>