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

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

Пример

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

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

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

Функция sum()

function sum (x, y){
   console.log(`Сумма чисел: ${x + y}`)
}
Функция sum() - JavaScript
Функция sum() - JavaScript

Эта функция выводит строку в консоль браузера. В этой строке есть статичная часть "Сумма чисел: ", которая не изменяется. Также есть динамичная часть "${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 с параметрами 1, 2 - JavaScript
Вызов функции sleep2sec с параметрами 1, 2 - JavaScript
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 (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

Поделись записью