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

Пример

Мы будем отложенно выводить в консоль браузера сумму чисел. То есть мы планируем передавать в функцию какие-нибудь числа, а потом дожидаться их сложения.

Напишем две функции:

sum — складывает числа
sleep2sec — запускает функцию sum, через 2 секунды

Функция sum()

function sum (x, y){
   console.log(`Сумма чисел: ${x + y}`)
}

Эта функция выводит строку в консоль браузера. В этой строке есть статичная часть «Сумма чисел: «, которая не изменяется. Также есть динамичная часть «${x + y}«, которая отображает сумму двух чисел (или результат конкатенации строк) — эта часть всегда высчитывается в момент вызова работы функции.

Эта функция работает с двумя аргументами, поэтому в неё нужно передавать два параметра — два числа для сложения. Под «x» будет первое число, а под «y» — второе.

Мы хотим понять, каким образом можно передавать эти параметры (x, y) для вызова функции sleep2sec. То есть нам нужно сделать так, чтобы сначала передать два числа в функцию sleep2sec, а потом эти наши два числа каким-то образом пробросились внутрь функции setTimeout., а после неё пробросились во вложенную функцию sum.

Функция sleep2sec()

function sleep2sec (a, b){
   console.log("Отложенный вызов начался")
   setTimeout(sum, 2000, a, b)
}

Передача параметров в функцию setTimeout осуществляется с третьего аргумента. То есть первым аргументом мы передаём функцию-обработчик, вторым аргументом — задержку в миллисекундах и начиная с третьего идут параметры через запятую.

В нашем случае:

Первый аргумент функции setTimeout — это функция-обработчик sum
Второй аргумент функции setTimeout — это число, которое обозначает миллисекунды — это время задержки (отложенного вызова sum)
Третий аргумент функции setTimeout — это первое передаваемое число в sum
Четвёртый аргумент функции setTimeout — это второе передаваемое число в sum

Функция sleep2sec - расписаны аргументы для setTimeout - JavaScript — Функция sleep2sec — расписаны аргументы для setTimeout — JavaScript

Вызов функции sleep2sec() с параметрами

sleep2sec(1,2)

sleep2sec(473,593)

Вызов функции sleep2sec с параметрами 473, 593 - JavaScript — Вызов функции sleep2sec с параметрами 473, 593 — JavaScript

После вызова функции sleep2sec проходит 2 секунды и в консоль выпадает сумма чисел.

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

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

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

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

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

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

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

JavaScript | setTimeout()

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

HTML | Таймеры

Стандарт 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 — Функции — https://tc39.es/ecma262/#sec-function-objects