Asynkron JavaScript

"Jag kommer att bli klar senare!"

Funktioner som körs parallellt med andra funktioner kallas asynkrona (asynchronous)

Ett bra exempel är JavaScript setTimeout()

Asynkron JavaScript

Exemplet som användes i föregående kapitel har förenklats avsevärt.

Syftet är att visa syntaxen för callback-funktioner:

Exempel

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

Prova själv

I det föregående exemplet,myDisplayer är namnet på funktionen.

Det används som parameter till myCalculator()。

I den verkliga världen används callbacker oftast tillsammans med asynkrona funktioner.

En typisk exempel är JavaScript setTimeout()。

Vänta på timeout

När du använder JavaScript-funktioner setTimeout() När, kan du specificera vilken callback-funktion som ska köras vid timeout:

Exempel

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

Prova själv

I det föregående exemplet,myFunction Används som en callback.

Funktion (funktnamn) som skickas som parameter till setTimeout()。

3000 är millisekunderna innan timeout, så 3 sekunder senare kommer den att anropas myFunction()。

När du överför en funktion som parameter, kom ihåg att inte använda klamrar.

Korrekt: setTimeout(myFunction, 3000);

Fel: setTimeout(myFunction(), 3000);

Om du inte överför namnet på funktionen som parameter till en annan funktion, kan du alltid överföra hela funktionen:

Exempel

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

Prova själv

I det föregående exemplet,function(){ myFunction("Jag älskar dig !!!"); } används som callback. Det är en fullständig funktion. En fullständig funktion som skickas som parameter till setTimeout().

3000 är millisekunderna innan timeout, så 3 sekunder senare kommer den att anropas myFunction()。

Vänta på intervall:

När du använder JavaScript-funktioner setInterval() kan du specificera vilken callback-funktion som ska köras vid varje intervall:

Exempel

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

Prova själv

I det föregående exemplet,myFunction används som callback.

Funktion (funktnamn) som skickas som parameter till setInterval()。

1000 är millisekunderna mellan intervallerna, så myFunction() anropas en gång per sekund.

Vänta på fil

Om du skapar en funktion för att ladda externa resurser (som skript eller filer), kan du inte använda dessa innehåll innan de är helt laddade.

Detta är det bästa tillfället att använda en callback-funktion.

Detta exempel laddar en HTML-fil (mycar.htmloch visa den här HTML-filen i webbsidan när den är helt laddad:

Vänta 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() {
    om (req.status == 200) {
      myCallback(this.responseText);
    } annars {
      myCallback("Fel: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

Prova själv

I det föregående exemplet,myDisplayer används som callback.

Funktion (funktnamn) som skickas som parameter till getFile()。

Nedan är mycar.html kopia:

mycar.html

<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>En bil är ett hjulfört, självbärande fordon används för transport.</p>
<p>De flesta definitioner av termen specificerar att bilar är designade för att köra huvudsakligen på vägar, att ha sittplatser för en till åtta personer, och att typiskt ha fyra hjul.</p>
<p>(Wikipedia)</p>