JavaScript warten, bis sich Variable ändern?
Ich habe ein Formular mit einem Submit-Button.
<button onClick={() => submitHandler("fromSubmitButton")}>Submit</button>
Die submitHandler Funktion sendet über einen Websocket eine Nachricht an den Server, ohne eine direkte Antwort zu bekommen, wie es mit async/await funktionieren würde:
socket.emit('email-submit', value)
Nach einiger Zeit kommt vom Server bzw. Websocket eine Nachricht:
socket.on('badEmailORphone', function(msg) {
setBadEmailORphone(msg)
});
In der Zeit zwischen dem Klick auf Submit und setBadEmailORphone gesetzt wird, möchte ich einen Ladescreen einblenden.
Rein logisch müsste ich den Ladescreen ab Klick auf den Submit-Button bis setBadEmailORphone setzen, aber wie kann ich in JavaScript x Sache machen, bis sich eine Variable ändert?
Meine erste Theorie war:
Submit onClick:
while(!setBadEmailOrphone) setLoading(true) //Mit etwas Delay zwischen Durchläufen
2 Antworten
![](https://images.gutefrage.net/media/user/MrAmazing2/1562539605664_nmmslarge__63_0_466_466_da6195808c107c57ce2a8b233a2bcf4f.jpg?v=1562539606000)
Die Variable selbst kannst bzw. solltest du nicht überwachen.
Mit einem while-Loop wie es Funcional vorschlägt ist das völliger Quatsch, da bleibt die komplette Oberfläche hängen. Wenndann per setInterval, aber das ist keine Good Practice - Busy Waiting und auch Lazy Polling sollte man vermeiden.
Du kannst deinen Code zum Beenden der Ladeanimation einfach in den Setter schreiben, der die Variable setzt, oder in deinen Socket-Listener, der den Setter aufruft.
Beim Email-Submit: Ladeanimation einblenden
socket.emit('email-submit', value);
loadingAnimation.classList.remove('hidden');
Bei Empfangen der Antwort: Ladeanimation ausblenden
socket.on('badEmailORphone', msg => {
loadingAnimation.classList.add('hidden');
setBadEmailORphone(msg)
});
![](https://images.gutefrage.net/media/user/Functional/1676159504902_nmmslarge__0_0_960_960_e2ac34e1b18f19102f515d8e9bd9a8ba.jpg?v=1676159505000)
"setBadEmailOrphone" ist ja wohl eine Funktion, die eine andere Variable (wahrscheinlich "badEmailOrphone"?) setzt. Sprich, du kannst diese Variable prüfen und anhand dieser einen Ladebildschirm anzeigen:
while (!badEmailOrphone) {
// etwas anzeigen
}
Ansonsten bräuchte man da schon etwas mehr Kontext, z.B. ob ein Framework verwendet wird (React?), oder pures JavaScript etc.