JavaScript | setTimeout()

Короткая справка по setTimeout()

handle = self . setTimeout( handler [, timeout [, arguments... ] ] )

Планирует тайм-аут для запуска обработчика после тайм-аута в миллисекундах. Любые аргументы передаются непосредственно обработчику.

handle = self . setTimeout( code [, timeout ] )

Планирует тайм-аут для компиляции и запуска кода после тайм-аута в миллисекундах.

Метод setTimeout() должен возвращать значение, возвращаемое этапами инициализации таймера, передавая им аргументы метода, объект, на котором реализован метод, для которого выполняется алгоритм (объект Window или WorkerGlobalScope) в качестве «контекста метода«, и флаг «повторения» установлен в значение false.

Минимальный набор для работы.

Мы создадим две функции. Первая будет ДЕЛАТЬ, а вторая будет ЗАПУСКАТЬ ПО ТАЙМЕРУ первую. По сути вторая ничего сама не делает — никак не влияет на данные. Вторая функция обеспечивает всей программе ОТЛОЖЕННОСТЬ (АСИНХРОННОСТЬ), которую не может дать интерпретатор кода JavaScript.

То есть setTimeout — это не фундаментальная конструкция стандарта ECMAScript, по которому работает JavaScript. В нашем случае setTimeout — это просто «Браузерный API» — это функция браузерного прикладного интерфейса программирования «WindowOrWorkerGlobalScope mixin», которая входит в состав стандарта HTML, описанного в консорциуме «whatwg.org». Миксин WindowOrWorkerGlobalScope предназначен для использования API, которые должны быть представлены в объектах Window и WorkerGlobalScope.

 

Пример работы setTimeout() с таймером и функцией.

Напишем первую функцию nowDate, которая будет выводить в консоль текущую дату:

function nowDate () {
   console.log(Date())
}

Мы ОБЪЯВИЛИ функцию, но НЕ ЗАПУСТИЛИ её. (НЕ ВЫЗВАЛИ)

При попытке ВЫЗОВА функции nowDate() в консоль браузера будет немедленно выведена текущая дата. Мы пишем название функции и ставим круглые скобки — так мы ВЫЗЫВАЕМ её выполнение.

nowDate()

 

 

Напишем вторую функцию sleep5sec, которая будет совершать ОТЛОЖЕННЫЕ действия по заданному таймеру:

function sleep5sec () {
   setTimeout(nowDate, 5000)
}

В этой функции мы будем на 5 секунд откладывать выполнение выведения текущей даты. То есть мы будем на 5 секунд ОТКЛАДЫВАТЬ ВЫЗОВ функции nowDate, которую ОБЪЯВИЛИ ранее.

В setTimeout() нам нужно передать два параметра:

1. Ссылку на функцию обратного вызова (в нашем случае это nowDate). Просто название функции БЕЗ КРУГЛЫХ СКОБОК, потому что круглые скобки будут немедленно её вызывать и ТАЙМЕР НЕ БУДЕТ РАБОТАТЬ.
2. Число миллисекунд, через которое передаваемая функция будет вызвана. В 1 секунде 1000 миллисекунд.

 

ВНИМАНИЕ!!! В setTimeout() мы передаём ТОЛЬКО ССЫЛКУ НА ФУНКЦИЮ. Круглые скобки НЕ НУЖНЫ. Убираем круглые скобки

Если в setTimeout() передать название функции с круглыми скобками, то она будет немедленно ВЫЗВАНА. Никакой асинхронности не будет заметно.

 

Что мы имеем на данный момент?

Сейчас у нас есть две функции (две небольшие программки). Их имена:

1. nowDate
2. sleep5sec

nowDate — При вызове. Мгновенно вернёт результат (данные).

sleep5sec — При вызове. Подождёт 5 секунд и вернёт результат (данные).

 

Что делать после объявления функций?

Интерпретатор получил наши функции — маленькие программы. Он знает как их будет выполнять.

Теперь нам нужно вызвать ту функцию, которая возвращает ОТЛОЖЕННЫЕ данные … Нужно вызвать ту функцию, которая знает как выполнять другую функцию с временной задержкой …  Нужно вызвать ту функцию, которая в своём теле содержит setTimeout().

Мы вызываем sleep5sec(). Пишем название нашей функции и СТАВИМ КРУГЛЫЕ СКОБКИ.

sleep5sec()

Информационные ссылки

JavaScript | setTimeout() | Как передать параметры в функцию-обработчик?

Стандарт HTML (whatwg) — Таймеры — https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers

Стандарт HTML (whatwg) — Миксин WindowOrWorkerGlobalScope — https://html.spec.whatwg.org/multipage/webappapis.html#windoworworkerglobalscope-mixin

Стандарт HTML (whatwg) — Метод setTimeout() — https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#dom-settimeout

Стандарт ECMAScript — конструктор Date() — https://tc39.es/ecma262/#sec-date-constructor

Стандарт ECMAScript — Функции — https://tc39.es/ecma262/#sec-function-objects