Сделать что-то позже

До сих пор ваши скрипты действовали в два момента: когда страница загружается и когда пользователь что-то делает — например, щёлкает мышью, печатает или отправляет форму. Но часто что-то должно произойти через некоторое время: сообщение пропадает через пару секунд после появления, всплывает предложение, звонит напоминание. Для этого в JavaScript есть функция setTimeout() — таймер:

setTimeout(function () {
    console.log("Прошли две секунды.");
}, 2000);

setTimeout() принимает два аргумента: функцию и время ожидания перед её запуском в миллисекундах (тысячных долях секунды). 1000 миллисекунд — это одна секунда, так что 2000 — две секунды. Обратите внимание на конец: } закрывает функцию, затем идут запятая и число, а ) закрывает скобки setTimeout(.

Это похоже на addEventListener(): скрипт лишь передаёт функцию, а браузер вызывает её позже — на этот раз, когда время истечёт, и только один раз.

Таймер можно поставить при загрузке страницы или в обработчике. Этот очищает сообщение через две секунды после щелчка:

saveButton.addEventListener("click", function () {
    message.textContent = "Сохранено!";
    setTimeout(function () {
        message.textContent = "";
    }, 2000);
});

Функцией может быть и та, которую вы определили раньше, — её передают по имени:

function hideMessage() {
    message.textContent = "";
}

setTimeout(hideMessage, 2000);

Типичные ошибки:

• setTimeout(hideMessage(), 2000): со скобками hideMessage() запускается сразу, а setTimeout() получает не функцию, а то, что она вернула. Как и с addEventListener(), передавайте функцию без ().
• setTimeout(hideMessage, 2): время указывается в миллисекундах, а не в секундах, поэтому таймер ждёт две тысячные секунды, и сообщение исчезает раньше, чем его успевают прочитать.

На странице в этом упражнении в CSS есть класс hidden с правилом display: none;, которое скрывает элемент. Уберите класс — и элемент появится.