Передача параметра в callback функцию setTimeout() в JS

Быстрый ответ

Для передачи параметров в функцию обратного вызова setTimeout(), вы можете использовать стрелочную функцию:

setTimeout(() => myFunction(param1, param2), 1000);

Так, параметры param1 и param2 будут переданы в myFunction после завершения однозначенного задерживания одной секунды.

Визуализация: Синхронное обслуживание ужина

Представьте, что вы — шеф-повар на устроенном вами ужине:

function serveDish(dishName, delay) {
  // Суп готов! Или любое другое блюдо...
  setTimeout(() => {
    console.log(`Стол накрыт: ${dishName}`);
  }, delay);
}

// Всё подобно изысканному ресторану — каждое блюдо подаётся в назначенное время
serveDish('🍲 Суп', 1000);    // Суп в горшочке появится на столе через секунду
serveDish('🥗 Салат', 2000);   // Затем, через две секунды, салат
serveDish('🍰 Десерт', 3000);  // И десерт, безусловно, подаём в конце, в это укладывается всеобщий порядок

Вот как точно по расписанию происходит сервировка блюд:

⏲️ Через 1 сек: [🍲 Суп]
⏲️ Через 2 сек: [🍲 Суп, 🥗 Салат]
⏲️ Через 3 сек: [🍲 Суп, 🥗 Салат, 🍰 Десерт]

Каждое из блюд подается в точно заранее назначенное время.

Глубокое погружение в параметры setTimeout

Зафиксировать аргументы с помощью Function.prototype.bind

Используя Function.prototype.bind, вы можете привязать параметры к вызываемой функции в setTimeout:

setTimeout(myFunction.bind(null, param1, param2), 1000);

Это приведет к созданию новой функции с переданными параметрами param1 и param2, которая будет выполнена после задержки.

Подробнее об этом расскажет наш спикер на видео

Прямая передача параметров

С помощью ES2015 (известным также как ES6) есть возможность прямо передавать дополнительные параметры в setTimeout:

setTimeout(myFunction, 1000, param1, param2);

Так, param1 и param2 будут быстро переданы в myFunction после истечения одной секунды.

Управление областью видимости с помощью let

Уникальность let в ES6 заключается в том, что она позволяет управлять областью видимости переменных, особенно в циклах, чтобы адекватно привязать их значения:

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(`Итерация: ${i}`);
  }, i * 1000);
}

Благодаря let, каждый вызов setTimeout() использует своё замыкание, которое в итоге делает все итерации значений i независимыми.

Использование библиотек — Underscore.js

Библиотека Underscore.js предлагает функцию _.delay, которая просто упрощает задачу передачи параметров, выступая облегчающей оберткой для setTimeout:

_.delay(myFunction, 1000, param1, param2);

Такой подход обеспечивает простоту использования благодаря наглядному и понятному API.

Особенности и тонкости

Важно тестировать различные подходы и разбираться в их тонкостях. Например, стрелочные функции сохраняют контекст this области видимости, в то время как Function.prototype.bind позволяет намеренно задать this для привязки.

Следует избегать передачи инструкций в виде строк в setTimeout, так как это может иметь негативное влияние на производительность и безопасность кода из-за неявного вызова eval().

Понимание контекста выполнения таймеров может значительно улучшить ваши профессиональные навыки. Независимо от того, создаете ли вы плавные анимации или обрабатываете API-запросы, правильный выбор подхода влияет на отклик вашего приложения и удовлетворенность пользователей.

Полезные материалы

1. Глобальная функция setTimeout() – Веб API | MDN — детальное понимание функции setTimeout().
2. События времени в JavaScript — практическое руководство по временным событиям.
3. Планирование: setTimeout и setInterval — обучение планированию задач в JavaScript на профессиональном уровне.
4. JavaScript: Стрелочные функции для начинающих | от Брэндона Морелли | codeburst — всё, что нужно знать о стрелочных функциях, активно используемых в синтаксисе setTimeout().
5. Использование requestAnimationFrame с React Hooks | CSS-Tricks — альтернативы функции setTimeout для создания анимации.
6. no-implied-eval – ESLint – Подключаемый линтер JavaScript — рекомендации по безопасности для избегания использования eval() в setTimeout().
7. Как использовать консоль разработчика JavaScript | DigitalOcean — методы отладки setTimeout в консоли разработчика браузера.