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
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)
});
"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.