Jedno po druhém

Funkce označená async může čekat několikrát. Každé await počká na svůj Promise a teprve pak funkce pokračuje dalším řádkem. Díky tomu se snadno popisuje to, co se děje postupně, jako v receptu.

Na samotné čekání se hodí krátká funkce, kterou najdete v script.js tohoto cvičení:

function pockej(ms) {
    return new Promise(function (resolve) {
        setTimeout(resolve, ms);
    });
}

Vrátí objekt Promise, který dostane hodnotu, jakmile uplyne ms milisekund: setTimeout() za něj zavolá resolve. await pockej(1000); tedy funkci označenou async na sekundu pozastaví. Porovnejte odpočet před startem rakety se setInterval() s tímhle:

tlacitkoStart.addEventListener("click", async function () {
    for (let sekundy = 3; sekundy > 0; sekundy--) {
        odpocet.textContent = sekundy;
        await pockej(1000);
    }
    odpocet.textContent = "Start!";
});

Cyklus ukáže 3 a sekundu počká, ukáže 2 a počká, ukáže 1 a počká a pak raketa odstartuje. Žádný interval, který by bylo potřeba zastavit: cyklus prostě skončí.

Bez await byste každý další krok museli vložit do funkce časovače uvnitř funkce předchozího časovače a kód by se s každým krokem rozrůstal do šířky.

Častou chybou je zapomenout await před pockej(1000): pak se nečeká vůbec a všechny kroky proběhnou najednou. Uvidíte jen ten poslední.

V příští lekci budete takhle čekat dvakrát za sebou: nejdřív na odpověď serveru a pak na data v ní.