0 Tage Serie
javascript / beginner
Snippet

Erzeugen zeitverzögerter Zustandsänderungen mit JavaScript-Promises

Das Kapseln von setTimeout in einem Promise ermöglicht die Verwendung der async/await-Syntax für zeitgesteuerte Abläufe. In UI-Anwendungen vereinfacht dies sequentielle asynchrone Statusaktualisierungen wie Ladeanzeigen oder temporäre Hinweise.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
let status = 'Idle';
function delay(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds));
}
async function triggerAction() {
status = 'Processing...';
await delay(1500);
status = 'Completed successfully!';
}
</script>
<button on:click={triggerAction}>Start Process</button>
<p>Status: {status}</p>
svelte
Erklärung
1
function delay(milliseconds) {
Erstellt eine Hilfsfunktion, die ein Promise zurückgibt, das nach Ablauf der Zeit aufgelöst wird.
2
async function triggerAction() {
Definiert eine asynchrone Funktion, deren Ausführung mit await angehalten werden kann.
3
await delay(1500);
Pausiert die Ausführung für 1500 Millisekunden, bevor der Status auf abgeschlossen gesetzt wird.