React - state Eigenschaftswert wird über timeout() geändert und soll mit Verzögerung gerendert werden

[Samuel fiedler]

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.
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:

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:

(async function() {
  console.log("Start");
  await delay(5000);
  console.log("Ende");
})();

Das würde dann nach 5 Sekunden das „Ende“ ausgeben.

Falls du aber eine normale Funktion hast, kannst du hinter dem Aufruf ein .then() mit der danach auszuführenden Funktion schreiben. Falls du mit fetch gearbeitet hast, dann kennst du das bestimmt schon. Es wird dann aber nur der Teil nach der Zeit ausgeführt, der in dem .then() ist. Unser Beispiel sähe also so aus:

console.log("Start");
delay(5000).then(function() {
  console.log("Ende");
});

Nur ist es schwierig, damit eine Schleife zu programmieren, daher empfehle ich die obere Version.

Au revoir,
Samuel Fiedler