Beispiel:Promise-showcase-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Beispiel: Promise-basierender Timer</title>
<style>
fieldset {
    margin-top: 1em;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
	// Ausgabe in ein div statt auf die Konsole, damit man es auch ohne DevTools sieht
	const ausgabeBox = document.getElementById("ausgabe");
	function log(text) {
		const div = document.createElement("div");
		div.textContent = text;
		ausgabeBox.append(div);
	}

	function warte(sekunden, wert) {
		function warteExecutor(resolve, reject) {
			setTimeout(() => resolve(wert),	sekunden * 1000);
		}
		return new Promise(warteExecutor);
	}

	function beispiel1() {
		// Erzeuge Promise A
		warte(1, "Welt")
			// Registriere fulfilled-Callback auf Promise A
    	    .then(text => log(text));

       	log("Hallo");
    }

	document
		.querySelector("button[name=beispiel1]")
		.addEventListener("click", beispiel1);
});
</script>

</head>
<body>
<h1>Beispiel: Promise-basierender Timer</h1>
<button type="button" name="beispiel1">Starten</button>
<fieldset>
	<legend>Programmausgaben</legend>
	<div id="ausgabe">
	<div>Klicke auf den Button!</div>
    </div>
</fieldset>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Promise-showcase-1.html&oldid=99885“