Итоги

В этом уроке вы узнали, что:

• setTimeout(function () { ... }, 2000) запускает функцию один раз, через 2000 миллисекунд (2 секунды). Передавайте саму функцию, без ().
• Скрипт не ждёт таймер: строки после setTimeout() выполняются сразу, поэтому всё, что должно произойти после ожидания, помещается в функцию.
• setTimeout() возвращает идентификатор таймера, а clearTimeout(timer) отменяет таймер. Храните идентификатор в переменной let снаружи обработчиков, чтобы им мог пользоваться каждый обработчик.
• setInterval(function () { ... }, 1000) запускает функцию каждую секунду, пока clearInterval(timer) не остановит её. Переменная снаружи функции помнит то, что меняется между запусками, например оставшиеся секунды.
• button.disabled = true; отключает кнопку, пока страница занята, а false включает её снова.
• Функция, которой нужно время, возвращает промис — значение, которое приходит позже. await ждёт это значение и работает только в функции, помеченной async. Без await вы получите сам промис, и страница покажет [object Promise].
• Функция async может ждать несколько раз, шаг за шагом, например с помощью await wait(1000);. Остальная страница в это время продолжает работать.
• Сообщение вроде Загрузка… перед await говорит пользователю, что страница чего-то ждёт.
• Когда промис завершается неудачей, await бросает ошибку. try { ... } catch (error) { ... } её ловит, а error.message — это её текст. finally выполняется в конце в обоих случаях.

В следующем уроке, «Данные с сервера», ваши страницы будут загружать данные с сервера через fetch(), который тоже возвращает промис, так что await вам будет нужен постоянно.

Но сначала немного практики с таймерами: молниеносная викторина, в которой у игрока всего 2 секунды на ответ. На этот раз script.js пуст, и всю программу вы напишете сами.