JavaScript asynkron


Innehållsförteckning

    Visa innehållsförteckning

"Jag avslutar senare!"

Funktioner som körs parallellt med andra funktioner kallas asynkrona

Ett bra exempel är JavaScript setTimeout()

Asynkron JavaScript

Exemplen som användes i föregående kapitel var mycket förenklade.

Syftet med exemplen var att demonstrera syntaxen för återuppringningsfunktioner:

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>

<p>The result of the calculation is:</p>
<p id="demo"></p>

<script>
function myDisplayer(something) {
  document.getElementById("demo").innerHTML = something;
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);
</script>

</body>
</html>

I exemplet ovan är myDisplayer namnet på en funktion.

Den skickas till myCalculator() som ett argument.

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

Ett typiskt exempel är JavaScript setTimeout().


Väntar på en timeout

När du använder JavaScript-funktionen setTimeout(), du kan ange en återuppringningsfunktion som ska utföras vid timeout:

Exempel

setTimeout(myFunction, 3000);

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>setTimeout() with a Callback</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
setTimeout(myFunction, 3000);

function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}
</script>

</body>
</html>

I exemplet ovan används myFunction som en återuppringning.

myFunction skickas till setTimeout() som ett argument.

3000 är antalet millisekunder före time-out, alltså myFunction() kommer att anropas efter 3 sekunder.

Notera

När du skickar en funktion som ett argument, kom ihåg att inte använda parentes.

Höger: setTimeout(myFunction, 3000);

Fel: setTimeout(myFunction(), 3000);

Istället för att skicka namnet på en funktion som ett argument till en annan funktion, du kan alltid skicka en hel funktion istället:

Exempel

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}
</script>

</body>
</html>

I exemplet ovan, function(){ myFunction("Jag älskar dig !!!"); } används som en återuppringning. Det är en komplett funktion. Den fullständiga funktionen skickas till setTimeout() som ett argument.

3000 är antalet millisekunder före time-out, alltså myFunction() kommer att anropas efter 3 sekunder.



Väntar på intervaller:

När du använder JavaScript-funktionen setInterval(), du kan ange en återuppringningsfunktion som ska utföras för 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 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>

<p>Using setInterval() to display the time every second (1000 milliseconds).</p>

<h1 id="demo"></h1>

<script>
setInterval(myFunction, 1000);

function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML=
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}
</script>

</body>
</html>

I exemplet ovan används myFunction som en återuppringning.

myFunction skickas till setInterval() som ett argument.

1000 är antalet millisekunder mellan intervaller, alltså myFunction() anropas varje sekund.


Återuppringningsalternativ

Med asynkron programmering kan JavaScript-program starta långvariga uppgifter, och fortsätta köra andra uppgifter parallellt.

Men asynkronprogram är svåra att skriva och svåra att felsöka.

På grund av detta använder de flesta moderna asynkrona JavaScript-metoder inte återuppringningar. I JavaScript löses istället asynkron programmering med Promises istället.

Notera

Du kommer att lära dig om löften i nästa kapitel i denna handledning.