Hallo zusammen,
in den letzten Wochen habe ich mich ein wenig mit JavaScript beschäftigt. Bei einem Mini-Programm sehe ich aber nun den Wald vor lauter Bäumen nicht mehr und bitte daher freundlich um den berühmten Wink mit dem Zaun. Links auf entsprechende Literatur reichen vollkommen aus. Ich weiß gerade einfach schlicht nicht mehr, wonach konkret ich suchen sollte...
Von [1] habe ich mir ein kleines JavaScript geladen, das einen QR Code erzeugt. Das Formular dazu sieht wie folgt aus:
1 2 3 4 | <form name="QRform" id="QRform"> <textarea name="textField" rows="8" cols="70" onkeyup='updateQRCode(this.value)' onclick="this.focus();this.select();">Hello World</textarea> </form> |
Die Funktion "updateQRCode" sieht dabei wie folgt aus:
1 2 3 4 5 6 7 8 9 10 11 | function updateQRCode(text) { var element = document.getElementById("qrcode"); var bodyElement = document.body; if (element.lastChild) element.replaceChild(showQRCode(text), element.lastChild); else element.appendChild(showQRCode(text)); } |
Soweit, so klar.
Nun möchte ich erreichen, dass mein Programm wie folgt abläuft:
updateQRCode("Hallo") // QRCode gibt "Hallo" aus
sleep(2000) // Funktion schläft für 2 Sekunden
updateQRCode("Welt") //QRCode gibt "Welt" aus
Dazu habe ich mir folgende sleep-Funktion gebaut:
1 2 3 4 5 6 7 | function sleep(milliseconds) { const date = Date.now(); let currentDate = null; do { currentDate = Date.now(); } while (currentDate - date < milliseconds); } |
Mein Problem: Wenn ich den folgenden Code nun ausführe:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <script type="text/javascript"> function updateQRCode(text) { var element = document.getElementById("qrcode"); if (element.lastChild) element.replaceChild(showQRCode(text), element.lastChild); else element.appendChild(showQRCode(text)); } function sleep(milliseconds) { const date = Date.now(); let currentDate = null; do { currentDate = Date.now(); } while (currentDate - date < milliseconds); } const x = "Hallo" updateQRCode(x) console.log(x) sleep(2000) const y = "Welt" updateQRCode(y) console.log(y) |
...erhalte ich zwar den Console-Output "Hallo" und "Welt" entsprechend zeitversetzt. Sprich, die Funktion läuft hier wie gewünscht ab: Schreibe "Hallo" in die Console, warte 2 Sekunden und schreibe dann "Welt" in die Console. Das gilt jedoch nicht für den QRCode. Hier wird lediglich der QRCode für "Welt" angezeigt. Ansonsten passier nichts.
Kann mir hier vielleicht sagen, wie ich es schaffe, dass der QRCode sich nach 2 Sekunden über die Funktion updateQRCode() verändert?
[1] https://www.tutorialspoint.com/html5/qr_code.htm
Grüße und vielen Dank schonmal für Eure Hilfe!