New chapter: Timing Events

src/SUMMARY.md

@@ -55,3 +55,4 @@
     - [Навигация по DOM](web_apis/navigating_dom.md)
     - [Работа с классами элементов](web_apis/working_with_element_classes.md)
     - [Работа со стилями элементов](web_apis/working_with_element_styles.md)
+    - [События времени](web_apis/timing_events.md)

src/web_apis/timing_events.md

@@ -0,0 +1,91 @@
+# События времени
+
+На некоторых веб-страницах может требоваться какое-то действие совершить не сразу, а по истечении некоторого времени. К примеру, на сайте-блоге через минуту после открытия страницы пользователю может быть предложено подписаться на email-рассылку, а каждые несколько минут могут обновляться рекомендованные для прочтения статьи.
+
+Рассмотрим, какие в JavaScript есть возможности для реализации таких сценариев.
+
+### Функция `setTimeout`
+
+Функция `setTimeout` позволяет запланировать выполнение той или иной функции спустя заданный промежуток времени. В качестве первого аргумента `setTimeout` принимает функцию для выполнения в будущем, а в качестве второго — промежуток времени в миллисекундах, то есть тысячных секунды.
+
+К примеру, следующая программа через 5 секунд после загрузки страницы спрашивает имя пользователя и приветствует его.
+
+```js
+function greet() {
+    const name = prompt("What is your name?");
+    alert("Hello " + name);
+}
+
+setTimeout(greet, 5000);
+```
+
+Помимо двух обязательных аргументов, `setTimeout` принимает ещё произвольное число дополнительных аргументов, которые будут переданы в вызываемую функцию.
+
+К примеру, здесь трижды планируется запуск функции `console.log`. Через 1 секунду сработает вызов, который выведет строку `1s`, через 2 секунды — `2s`, через 3 — `3s`.
+
+```js
+setTimeout(console.log, 1000, "1s");
+setTimeout(console.log, 2000, "2s");
+setTimeout(console.log, 3000, "3s");
+```
+
+При этом `setTimeout` именно планирует выполнение указанной функции в будущем, а не блокирует поток исполнения — следующие за `setTimeout` инструкции продолжат исполняться вне зависимости от установленного таймаута. К примеру, следующая программа мгновенно выведет строки `First` и `Third`, а затем через 2 секунды — `Second`.
+
+```js
+console.log("First");
+setTimeout(console.log, 2000, "Second");
+console.log("Third");
+```
+
+### Функция `setInterval`
+
+Функция `setInterval` принимает точно такие же аргументы как `setTimeout`, но заданную функцию запускает не единожды, а произвольное число раз с заданным интервалом. К примеру, в следующей программе счётчик `counter` раз в секунду будет увеличиваться на `3` и выводиться в консоль.
+
+```js
+let counter = 0;
+
+function increaseAndLogCounter(step) {
+    counter += step;
+    console.log(counter);
+}
+
+setInterval(increaseAndLogCounter, 1000, 3);
+```
+
+### Функции `clearTimeout` и `clearInterval`
+
+Функция `setTimeout` возвращает числовой идентификатор таймаута, который при необходимости можно передать в `clearTimeout`, чтобы отменить работу таймаута.
+
+К примеру, в следующей программе будет выведено только `second`, так как таймаут на вывод `first` будет отменён.
+
+```js
+const firstTimeoutID = setTimeout(console.log, 1000, "first");
+const secondTimeoutID = setTimeout(console.log, 1000, "second");
+
+clearTimeout(firstTimeoutID);
+```
+
+Аналогично, работу `setInterval` можно отменить при помощи функции `clearInterval`.
+
+К примеру, в следующей программе значение счётчика будет выведено несколько раз с интервалом в 1 секунду, но через 10 секунд перестанет выводиться.
+
+```js
+let counter = 0;
+
+function logCounter() {
+    console.log(counter++);
+}
+
+const intervalID = setInterval(logCounter, 1000);
+setTimeout(clearInterval, 10000, intervalID);
+```
+
+## Упражнения
+
+1. Реализуй страницу для создания напоминаний. Пользователь может ввести текст и время в секундах, через которое страница должна отобразить напоминание с этим текстом.
+
+1. Реализуй страницу, на которой отображается таймер, показывающий число минут и секунд с момента загрузки страницы в формате `MM:SS`. Значение таймера должно обновляться каждую секунду.
+
+1. Реализуй викторину по таблице умножения. На странице должен отображаться случайным образом сгенерированный пример на умножение двух однозначных чисел. Пользователю нужно ввести результат умножения. Если введён неверный ответ, викторина показывает об этом уведомление на красном фоне и позволяет попробовать ещё раз. Если же ответ верный, то викторина показывает соответствующее уведомление на зелёном фоне и через две секунды генерирует следующий пример.
+
+1. Реализуй игру "Поймай крота". На странице должно отображаться поле 4 на 4 круглых "норы". В случайные моменты времени в случайных норах появляется изображение крота и через короткий случайный промежуток времени исчезает. Пользователю нужно успеть "поймать" очередного крота, кликнув на него. За каждого пойманного крота пользователю зачисляется призовое очко.