Что выполняется первым

setTimeout() не приостанавливает программу. Он лишь ставит таймер и передаёт ему функцию, а скрипт сразу идёт дальше, к следующей строке. Как вы думаете, что выведет этот код?

console.log("Вода закипает.");

setTimeout(function () {
    console.log("Чай готов!");
}, 3000);

console.log("Ждём чай…");

Вода закипает.
Ждём чай…
Чай готов!

Последняя строка появляется через три секунды после первых двух. JavaScript выполняет первый console.log(), ставит таймер и сразу выполняет второй console.log(). Только когда три секунды истекают, браузер вызывает функцию таймера. То же было бы и при 0 миллисекунд: функция таймера запускается лишь после того, как закончится код, который выполняется сейчас.

Поэтому всё, что должно произойти после ожидания, нужно поместить внутрь функции таймера. Строки ниже setTimeout() выполняются сразу:

setTimeout(function () {
    statusText.textContent = "Чай готов!";
}, 3000);
statusText.textContent = "Приятного чаепития!"; // Выполнится сразу, а не через 3 секунды

Сначала эта страница показывает Приятного чаепития!, а Чай готов! появляется через 3 секунды.

В этом упражнении вам также понадобится свойство disabled кнопки. После button.disabled = true; кнопка становится серой, и нажатие на неё ничего не делает; button.disabled = false; снова включает её. Это удобно, пока страница чего-то ждёт: никто не запустит одно и то же дважды.