Kleiner JavaScript Kurs

Pausen - Funktion delay(ms)

Normalerweise wird ein JavaScript Befehle erst ausgeführt, wenn der Befehl davor beendet ist (synchron)
Mit der Verwendung des Schlüsselwortes async, dem promise - Objekt und der asynchronen Funktion await lassen sich Programmabläufe aber auch unterbrechen (ähnlich, wie bei einem Event).
Mit der folgenden, kurzen JavaScript - Funktion hat man einen universellen "Pause - Befehl" delay(ms), der mit await delay(1000) eine Pause von 100ms (1s) erzeugt.

function delay(msec){
    return new Promise(function(resolve)
                         {setTimeout(resolve,msec)
                         });
 }

Hier ein kurzes Anwendungsbeispiel

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Asynchroner Zähler</title>                
    </head>                   
    <body>
		<h1>Asynchroner Zähler</h1>
        <button onclick="countToFive ();">Start</button>
		<h2 id="ausgabe"></h2>
        <script>
            ausgabe = document.getElementById("ausgabe");
            function delay(msec){
                return new Promise(function(resolve)
                                     {setTimeout(resolve,msec)
                                     });
             }	
            async function countToFive(){
                ausgabe.innerHTML = ("0 Sekunden");
                await delay(1000);
                ausgabe.innerHTML = ("1 Sekunde");
                await delay(1000);
                ausgabe.innerHTML = ("2 Sekunden");
                await delay(3000);
                ausgabe.innerHTML = ("5 Sekunden");
            } 
        </script>  
    </body>
</html>
So könnte es aussehen: JS_Kurs_B10async.html

Mit der delay Funktion lässt sich unserer JSXGraph Turtle - Vorlage auch einfach eine Turtle Animation hinzufügen:

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="css/jsxgraph.css" />
		<script src="js/jsxgraphcore.js"></script>
	</head>
	<body>
		<a href="https://jsxgraph.uni-bayreuth.de/wiki/index.php?title=List_of_available_commands" target="_blank">Turtle - Befehle</a>
		<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
		<script>
            var aniZeit = 750;
			var brd = JXG.JSXGraph.initBoard("box", {boundingbox: [-300, 300, 300, -300]});
			var t = brd.create("turtle");
            async function zeichnen(){
                // hier kannst du mit der Turtle zeichnen
                await delay(aniZeit);
                for(var i=0; i<10; i++){
                     t.forward(50);
                     await delay(aniZeit);
                     t.left(360/10);
                     await delay(aniZeit);
                }
                // -------------------------------------
            }
            function delay(msec){
              return new Promise(function(resolve)
                                   {setTimeout(resolve,msec)
                                   });
 			}
            zeichnen();
		</script>
	</body>
</html>
So könnte es aussehen: JS_Kurs_B10async1.html

Die Funktionen setTimeout(fkt, zeit) und fetch(url) arbeiten ebenfalls asynchron.


Promise

Ein Promise repräsentiert ein Wert der sofort, in der Zukunft oder (vielleicht) niemals verfügbar ist. Dabei hat ein Promise folgende Zustände:
  • pending  —  Der Ausgangszustand eines Promise
  • resolved  —  Die Operation innerhalb des Promise wurde erfolgreich durchgeführt.
  • rejected  —  Die Operation ist fehlgeschlagen


async / await

await und async sind relativ neu in JavaScript und werden von den meisten Browsern seit ca. 2017 unterstützt.
  • async makes a function return a Promise
  • await makes a function wait for a Promise.