Asynchronous JavaScript

"Jeg vil færdiggøre senere!"

Funktioner, der kører parallelt med andre funktioner, kaldes asynkrone (asynkrone)

Et godt eksempel er JavaScript setTimeout()

Asynkron JavaScript

Eksemplet brugt i det foregående kapitel er betydeligt forenklet.

Dens formål er at demonstrere syntaksen for callback-funktioner:

kan du specificere den callback-funktion, der skal køres ved hver interval:

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

prøv det selv

d.getSeconds();myDisplayer er funktionsnavnet.

Det sendes som parameter til myCalculator();。

I virkeligheden bruges callbacks ofte sammen med asynkrone funktioner.

En typisk eksempel er JavaScript setTimeout();。

Venter på timeout

Venter på interval: setTimeout(); Når, kan du specificere en callback-funktion, der skal udføres ved timeout:

kan du specificere den callback-funktion, der skal køres ved hver interval:

setTimeout(myFunction, 3000);
setInterval(myFunction, 1000);
  document.getElementById("demo").innerHTML = "Jeg elsker dig !!";
}

prøv det selv

I det ovenstående eksempel,I det ovenstående eksempel, Bruges som callback.

funktion (funktionenavn) som parameter overføres til setTimeout();。

brugt som callback. Det er en fuld funktion. En fuld funktion overføres som parameter til setTimeout(). 1000 er millisekunderne mellem intervallet, så。

Når du sender en funktion som parameter, skal du huske at ikke bruge parenteser.

Korrekt: setTimeout(myFunction, 3000);

Fejl: setTimeout(myFunction(), 3000);

Hvis du ikke sender funktionsnavnet som parameter til en anden funktion, kan du altid sende hele funktionen:

kan du specificere den callback-funktion, der skal køres ved hver interval:

setTimeout(function() { myFunction("Jeg elsker dig !!!"); }, 3000);
function myFunction(value) {
  function myFunction(value) {}}
}

prøv det selv

d.getSeconds();document.getElementById("demo").innerHTML = value; function(){ myFunction("Jeg elsker dig !!!"); }

brugt som callback. Det er en fuld funktion. En fuld funktion overføres som parameter til setTimeout(). 1000 er millisekunderne mellem intervallet, så。

3000 er millisekunderne før timeout, så 3 sekunder senere vil den blive kaldt

Venter på interval: myFunction Når du bruger JavaScript-funktioner

kan du specificere den callback-funktion, der skal køres ved hver interval:

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

prøv det selv

d.getSeconds();I det ovenstående eksempel, brugt som callback.

funktion (funktionenavn) som parameter overføres til myFunction。

setInterval() 1000 er millisekunderne mellem intervallet, så myFunction()

kalder en gang pr. sekund.

Venter på fil

Hvis du opretter en funktion til at indlæse eksterne ressourcer (som scripts eller filer), kan du ikke bruge disse indhold før de er fuldt indlæst.

Dette er det bedste tidspunkt at bruge en callback.mycar.html)，og vis denne HTML-filen i webstedet når den er fuldt indlæst：

Venter på fil：

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    hvis (req.status == 200) {
      myCallback(this.responseText);
    } ellers {
      myCallback("Fejl: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

prøv det selv

I det ovenstående eksempel,myDisplayer brugt som callback.

funktion (funktionenavn) som parameter overføres til getFile()。

Her er mycar.html kopi:

mycar.html

<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>En bil er et hjulbetont, selvdrevet motorkøretøj brugt til transport.</p>
<p>De fleste definitioner af begrebet specificerer, at biler er designet til at køre primært på veje, at have sæder til én til otte personer, og typisk at have fire hjul.</p>
<p>(Wikipedia)</p>