Beispiel:Promise-showcase-2.html
Aus SELFHTML-Wiki
<!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);
}
const beispiele = {
beispiel2() {
// Erzeuge Promise A
warte(1, "Selfhtml")
// Registriere fulfilled-Callback auf Promise A
.then(wert1 => {
log("1. Hallo " + wert1);
// fulfilled-Callback gibt nichts zurück
}) // then gibt Promise B zurück!
// Registriere fulfilled-Callback auf Promise B
.then(wert2 => {
log("2. Hallo " + wert2);
});
},
beispiel3() {
warte(1, "Selfhtml")
.then(wert1 => {
log("1. Hallo " + wert1);
// Gib eine Zeichenkette als Ergebnis zurück
return "*" + wert1 + "*";
})
.then(wert2 => {
// wert2 enthält die Rückgabe aus erstem then
log("2. Hallo " + wert2);
});
},
beispiel4() {
warte(1, "Selfhtml")
.then(wert1 => {
log("1. Hallo " + wert1);
// onFulfilled-Callback gibt Promise C zurück
return warte(1, "*" + wert1 + "*");
}) // then gibt Promise B zurück!
.then(wert2 => {
// Zeigt den Wert von Promise C
log("2. Hallo an " + wert2);
});
}
};
document.body
.addEventListener("click", function(event) {
if (event.target instanceof HTMLButtonElement) {
const beispiel_name = event.target.name;
log("Starte " + beispiel_name);
beispiele[beispiel_name]();
}
});
});
</script>
</head>
<body>
<h1>Beispiel: Promise-basierender Timer</h1>
<button type="button" name="beispiel2">Beispiel 2</button>
<button type="button" name="beispiel3">Beispiel 3</button>
<button type="button" name="beispiel4">Beispiel 4</button>
<fieldset>
<legend>Programmausgaben</legend>
<div id="ausgabe">
<div>Klicke auf den Button!</div>
</div>
</fieldset>
</body>
</html>
