React - state Eigenschaftswert wird über timeout() geändert und soll mit Verzögerung gerendert werden
bearbeitet von
Hallo Samuel fiedler!
Das heißt jetzt, dass du das nicht über setTimeout machen solltest, sondern stattdessen die folgenden Schritte ausführen kannst:
Als erstes machen wir die Funktion asynchron. Das heißt, dass wir ein `function` zu `async function` ändern. Damit wird vor Funktionen ein await möglich. Unser besonderer Helfer ist hier das Promise-Objekt von JavaScript. Mehr dazu erfährst du in dem [Wiki-Artikel zum JavaScript Promise](https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Promise).
Wenn du in einer asynchronen Funktion eine Funktion mit await aufrufst (`await METHODE()`) und diese Funktion ein Promise zurückgibt, dann wird bei der Funktion so lange gewartet, bis das Promise resolved wird.
Die Funktion zum resolven kannst du in setTimeout packen. So kann man dann einfach eine Warte-Maschine bauen:
~~~javascript
function delay(n) { // Funktionsdefinition
return new Promise(function(resolve) { // Erstelle ein neues Promise
setTimeout(resolve, n); // Warte n Millisekunden, bevor du das Promise resolvst
});
}
~~~
Diese Funktion lässt sich jetzt einfach verwenden:
~~~javascript
(async function() {
console.log("Start");
await delay(5000);
console.log("Ende");
})();
~~~
Das würde dann nach 5 Sekunden das „Ende“ ausgeben.
Au revoir,
Samuel Fiedler
--
In CSS gibt es ja position: ab*solute*; und position: **re**lative;. Was ist nun die Mischung daraus?
Ganz klar: position: **re***solute*!