Ergebnis 1 bis 3 von 3
  1. #1
    Amarganth ist offline Grünschnabel
    registriert
    16-11-2020
    Beiträge
    1

    JavaScript, async / await

    Hey JavaScript-Gemeinde

    Ich bräuchte mal Hilfe mit JavaScript und async / await. Auch aus den Beschreibungen im Netz werde ich bezüglich meinem Wunsch nicht fündig.

    Mein Wunsch ist es, eine Funktion aufzurufen und im Programmcode erst weiterzufahren, wenn die Funktion, die setInterval und/oder setTimeout enthält, beendet wurde. Es geht um Grafikanimationen in einem Canvas-Objekt.

    Ich würde im nachfolgenden Code wünschen, dass der TEST2 erst aufgerufen wird, wenn die Eingabetaste gedrückt wurde. Und auch, dass der Text "Weiter mit lustig" erst kommt, wenn die 10 Sekunden abgelaufen sind.

    Die Ausgabe auf der Konsole ist aber wie folgt:

    20:15:51.532 TEST1: Warten auf die Eingabetaste.
    20:15:51.532 TEST1: 1 Weiter durch Druecken der Eingabetaste.
    20:15:51.532 TEST1: 2a Hier wird nun auf die Eingabetaste gewartet
    20:15:51.532 TEST2: 10 Sekunden warten.
    20:15:51.532 TEST2: Start
    20:15:51.532 Weiter mit lustig...
    20:16:01.534 TEST2: Fertig (nach 10 Sekunden)
    20:16:09.744 TEST1: 2b <ENTER>
    20:16:09.744 TEST1: 3 Taste gedrückt. Fertig!
    Code:
    window.onload = function() {
    	console.log(zeit()+" TEST1: Warten auf die Eingabetaste.");
    	wartenAufEingabetaste();
    	console.log(zeit()+" TEST2: 10 Sekunden warten.")
    	warteSec(10);
    	console.log(zeit()+" Weiter mit lustig...");
    }
    
    async function wartenAufEingabetaste() {
    	console.log(zeit()+'   TEST1: 1 Weiter durch Druecken der Eingabetaste.')
    	await _waitForKeypress();
    	console.log(zeit()+'   TEST1: 3 Taste gedrückt. Fertig!')
    }
    
    function _waitForKeypress() {
    	return new Promise((resolve) => {
    		document.addEventListener('keydown', onKeyHandler);
    		//console.log("Ist nun 'keydown' aktiv? " + document.hasOwnProperty('keydown'));
    		console.log(zeit()+'   TEST1: 2a Hier wird nun auf die Eingabetaste gewartet');
    		function onKeyHandler(event) {
    			if (event.keyCode === 13) {
    				console.log(zeit()+'   TEST1: 2b <ENTER>');
    				document.removeEventListener('keydown', onKeyHandler);
    				resolve();
    			}
    		}
    	});
    }
    
    async function warteSec(sec) {
    	console.log(zeit()+"   TEST2: Start");
    	await _delay(sec*1000);
    	console.log(zeit()+"   TEST2: Fertig (nach "+sec+" Sekunden)");
    }
    
    function _delay(ms) {
    	return new Promise((resolve) => setTimeout(resolve, ms));
    }
    
    function zeit() {
    	let d = new Date();
    	return d.getHours()+":"+d.getMinutes()+":"+d.getSeconds()+"."+d.getMilliseconds();
    }
    Falls es eine Rolle spielt: Ich arbeite mit Safari 14.0.1 unter macOS 11.0.1.

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.822

    AW: JavaScript, async / await

    Hi!
    Für solche Abhängigkeiten arbeitet man in JS mit Callbacks. Hier wird das ganz anschaulich gezeigt: https://www.mediaevent.de/javascript...-function.html
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  3. #3
    Avatar von rckd
    rckd ist offline Eroberer
    registriert
    04-01-2017
    Beiträge
    61

    AW: JavaScript, async / await

    Das wäre eine Variante, wie praktikabel das ist kann ich dir aber nicht sagen:

    Code:
    const waitForKeyPress = () => new Promise((resolve, reject) => {
        document.addEventListener('keypress', (e) => {
        resolve(e)
      }, {
        once: true
      })
    })
    
    const main = async () => {
      const e = await waitForKeyPress()
      console.log(e)
    }
    
    main()

Ähnliche Themen

  1. Antworten: 24
    Letzter Beitrag: 13-06-2013, 13:15
  2. AJAX-Aufruf mit "async" parameter false - Firefox
    Von cromagnon im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 11-10-2006, 16:13

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •