JavaScript DOM Element mit Promise updaten

[Woodz]

Hi.

Ich wollte mal fragen, ob es möglich ist, z.B. einen Text innerhalb eines Divs mit Hilfe eines Promise zu updaten:
So in etwas habe ich mir das vorgestellt:

function updateText(){
    return new Promise(function(resolve, reject){
        document.getElementById('DivElement').innerHTML = "Text geändert";
        resolve;
    });
}

function readText(){
    return new Promise(function(resolve, reject){
        const text = document.getElementById('DivElement').innerHTML;
        console.log(text);
        resolve;
    });
}


updateText().then(readText());

Letztlich möchte ich Code ausführen lassen, nachdem ich sichergehen kann, dass das Element geupdated wurde.
Das hier ist nur ein grobes Konzept. Ich weiß nicht ob es funktioniert. Aber so in etwa soll der Ablauf sein.
Beste Grüße

 

[floq0r]

Sieht brauchbar aus, probier doch einfach ob es funktioniert. Afaik sollten solche DOM operations eh synchron sein, du solltest dafür keine promises brauchen. Besteht das Problem überhaupt?

 

[Woodz]

Ja besteht. Ich werde es morgen mal testen. Das eigentliche Problem ist, dass ich das Datum eines <input type="date"> Elements setze und danach auslese um eine Datenbankabfrage zu machen. Nun möchte ich aber sicher gehen, dass das Datum auf alle Fälle gesetzt wurde, bevor ich die Abfrage starte.

 

[floq0r]

Fraglich wird sein ob das Setzen über innerHTML überhaupt promise-fähig ist, ob also der promise wirklich erst resolved wenn der Text gesetzt wurde, sonst stellt sich die Situation genauso dar wie ohne promise. Wenn es funktioniert kann es auch am Ablauf der execution liegen und dass die race condition damit eher zufällig vermieden wird.
Wenn ich in solchen Fällen mit plugins zu tun habe die ich programmatisch als black box betrachten muss verwende ich manchmal setTimeout(function(){...},1);

 

[BeBur]

Wieso liest du überhaupt aus dem HTML raus, sende das Datum doch direkt per js. Woher bekommt js das Datum, wieso nicht direkt im Backend generieren?

 

[Dalek]

Im Browser hast du nur einen thread in dem alles passiert, sowohl dein eigener code als auch Layout und UI (https://developer.mozilla.org/en-US/docs/Glossary/Main_thread). Die Ausnahme sind web worker, aber das ist hier denke ich nicht das Thema.

Die Befehle in deinem Code werden synchron, d.h. blockierend ausgeführt. Erst wenn ein Befehl fertig ist wird der nächste ausgeführt. Du musst da nichts machen, dein Code wird in der Reihenfolge in der du ihn da schreibst ausgeführt.

Promises sind eine Variante um mit asynchronem Code umzugehen. Typischer asynchroner Code im Browser sind z.B. Netzwerkanfragen an den Server. In diesem Fall stoppt der Browser nicht den ganzen Main Thread bis der Server geantwortet hat, sondern er gibt dir eine Promise (oder einen Callback) zurück und macht im Code direkt weiter. In modernem JS kann man dann mit async/await das ganze wieder fast so behandeln als ob der Code synchron ist, await wartet bis die Promise resolvt ist bevor die nächste Zeile ausgeführt wird.

DOM Manipulationen wie in deinem Beispiel sind nicht asynchron, es bringt nichts da eine Promise drumherum zu machen, das ist völlig unnötig.

 

[floq0r]

DOM Manipulationen wie in deinem Beispiel sind nicht asynchron, es bringt nichts da eine Promise drumherum zu machen, das ist völlig unnötig.

Wie kann es dann sein, dass nach dem Setzen von innerHTML die query trotzdem kein aktuelles Ergebnis liefert wie der TE beschreibt? Ich bilde mir ein ich hatte auch schon ähnliches Verhalten.

 

[Dalek]

Wie kann es dann sein, dass nach dem Setzen von innerHTML die query trotzdem kein aktuelles Ergebnis liefert wie der TE beschreibt? Ich bilde mir ein ich hatte auch schon ähnliches Verhalten.

Ich hab ein Detail ausgelassen um das etwas zu vereinfachen. Das Setzen von innerHTML ist synchron, das rendern des neuen Text ist asynchron in typischen Browsern (siehe https://stackoverflow.com/questions/42986295/is-innerhtml-asynchronous oder auch https://macarthur.me/posts/when-dom-updates-appear-to-be-asynchronous).

document.getElementById('DivElement').innerHTML = "Text geändert";
const text = document.getElementById('DivElement').innerHTML;

In der zweiten Zeile ist die text Variable garantiert der geänderte Text. Im Browser ist das da aber nicht unbedingt schon sichtbar da das rendering noch nicht ausgelöst wurde. Das spielt z.B. eine Rolle wenn man nach dieser Modifikation direkt etwas rechenintensives macht, solange man selbst JS ausführt hat der Browser keine Gelegenheit die UI zu updaten.

 

[Woodz]

Danke für Eure Antworten. Nun die Sache ist ja mehr theoretischer Natur als praktischer. Erstens wollte ich wissen, ob es überhaupt möglich ist, die Manipulation innerhalb eines Promise durchzuführen, da ich auf dieses Problem gestoßen bin und wissen wollte, ob dies überhaupt möglich ist. Die praktische Umsetzung sieht nacher sowieso noch einmal anders aus.