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 1000ms (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>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>