Введение в обратные вызовы в JavaScript для начинающих

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

Что такое обратный вызов?

Когда мы передаем функцию в качестве аргумента другой функции, и эта функция вызывается внутри внешней или родительской функции, мы создаем обратный вызов. Если вы использовали встроенные методы в JavaScript, вероятно, вы уже использовали обратный вызов. Давайте рассмотрим базовый пример.

function greet(cbFunc) {
  cbFunc();
  cbFunc();
}
function sayHello() {
  console.log("Hello");
}
greet(sayHello);
//Returns --->
'Hello'
'Hello'

В приведенном выше примере мы создаем объявление функции с именем greet, которое принимает параметр cbFunc. Внутри тела функции cbFunc вызывается дважды. Затем мы создаем еще одно объявление функции с именем sayHello, и внутри тела этой функции мы записываем в console.log Hello. Это будет наша функция обратного вызова. Затем мы вызываем функцию greet и передаем sayHello в качестве аргумента, чтобы она стала функцией обратного вызова.

Когда мы используем функции обратного вызова, мы часто используем анонимную функцию, а не существующую. Причина этого в том, что если функция обратного вызова не будет использоваться где-либо еще, то нет необходимости хранить именованную функцию в коде для обратного вызова. В следующем примере мы обновляем код для использования анонимной функции:

function greet(cbFunc) {
  cbFunc()
  cbFunc()
}
greet(function() {
  console.log("Hello");
})
//Returns --->
'Hello'
'Hello'

Мы объявляем объявление функции с именем приветствие, которое принимает параметр с именем cbFunc. Это будет функция обратного вызова, и она дважды вызывается внутри тела функции. Затем мы вызываем функцию greet и передаем анонимную функцию непосредственно в качестве аргумента. Мы получаем тот же результат, когда функция запускается.

Если вы использовали setTimeout в JavaScript, значит, вы уже использовали обратный вызов. Функция setTimeout принимает обратный вызов и выполняет его по истечении определенного периода времени. Давайте посмотрим на пример.

setTimeout(() => {
  console.log("Hello");
}, 1000);
//Returns ---> 'Hello'

В приведенном выше примере мы передаем анонимную функцию в качестве обратного вызова setTimeout. Обратный вызов возвращает журнал консоли, в котором печатается строка Hello. Через одну секунду это печатается на экране.

Надеюсь, вам понравилась эта статья. Пожалуйста, не стесняйтесь публиковать любые комментарии, вопросы или отзывы и подписывайтесь на меня, чтобы получать больше контента!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.