img

Функция обратного вызова JavaScript: что это такое и как ее использовать

Функции обратного вызова (callback function) — важная часть языка программирования JavaScript. Разобравшись с ней, ваши навыки в JS значительно улучшатся. В этой стать мы подробно рассмотрим, что это такое и как использовать функции обратного вызова в JavaScript на нескольких примерах. 

icon strelka icons icons

узнай больше на курсе

Python программист с нуля
Стань разработчиком на одном из самых популярных языков программирования - Python
Подробнее о курсе
Java-разработчик с нуля
Освойте backend-разработку и программирование на Java, фреймворки Spring и Maven, работу с базами данных и API
Подробнее о курсе
C# разработчик с нуля
На курсе ты освоишь основы программирования на C#, включая синтаксис, объектно-ориентированное программирование и асинхронное программирование.
Подробнее о курсе

Что такое функция обратного вызова?

В JavaScript функции являются объектами. Можем ли мы передавать функции объекты в качестве параметров? Да. Следовательно, мы также можем передавать функции в качестве параметров другим функциям и вызывать их внутри внешних функций. Звучит сложно? Давайте разберем на примере ниже:

function print(callback) {  
    callback();
}

Функция print() принимает другую в качестве параметра и вызывает её внутри. Это допустимо в JavaScript, и мы называем это «функцией обратного вызова» (callback). То есть функция, которая передается другой функции в качестве параметра, является функцией обратного вызова. Но это еще не всё.

Зачем нужны функции обратного вызова?

JavaScript выполняет код последовательно в порядке сверху вниз. Однако бывают случаи, когда код выполняется (или должен выполняться) после того, как происходит что-то другое, и тоже не последовательно. Это называется асинхронным программированием.

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

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

Как создать обратный вызов

Давайте начнем с простого примера. Мы хотим вывести сообщение в консоль, но оно должно появиться там через 3 секунды.

const message = function() {  
    console.log("This message is shown after 3 seconds");
}

setTimeout(message, 3000);

В JavaScript есть встроенный метод «setTimeout», который вызывает функцию или оценивает выражение через заданный период времени (в миллисекундах). Так, здесь функция «message» вызывается по истечении 3 секунд. (1 секунда = 1000 миллисекунд).

Другими словами, функция message вызывается после того, как что-то произошло (в данном примере прошло 3 секунды), но не раньше. Таким образом, функция message является примером функции обратного вызова.

Что такое анонимная функция?

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

setTimeout(function() {  
    console.log("This message is shown after 3 seconds");
}, 3000);

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

Обратный вызов как функция-стрелка

При желании вы можете написать ту же функцию обратного вызова в виде стрелочной функции ES6, которая является более новым типом функций в JavaScript:

setTimeout(() => { 
    console.log("This message is shown after 3 seconds");
}, 3000);

Что насчет событий?

JavaScript — это язык программирования, основанный на событиях. Мы также используем функции обратного вызова для обработки событий. Например, представим, что мы хотим, чтобы пользователь нажал на кнопку:

<button id="callback-btn">Click here</button>

В этом случае сообщение будет появляться в консоли только тогда, когда пользователь нажмёт на кнопку:

document.queryselector("#callback-btn")
    .addEventListener("click", function() {    
      console.log("User has clicked on the button!");
});

Здесь мы сначала выбираем кнопку по её id, а затем добавляем обработчик событий с помощью метода addEventListener. Он принимает 2 параметра. Первый — это тип события, в данном случае «click», а второй параметр — это функция обратного вызова, которая выводит сообщение в консоль при нажатии на кнопку.

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

Надеемся, что эта статья помогла вам лучше понять функции обратного вызова, что они делают и как с ними проще работать. 

Успехов в JavaScript!

Ссылка
скопирована
Получите бесплатные уроки на наших курсах
Все курсы
icon strelka icons icons

узнай больше на курсе

Python программист с нуля
Стань разработчиком на одном из самых популярных языков программирования - Python
Подробнее о курсе
Java-разработчик с нуля
Освойте backend-разработку и программирование на Java, фреймворки Spring и Maven, работу с базами данных и API
Подробнее о курсе
C# разработчик с нуля
На курсе ты освоишь основы программирования на C#, включая синтаксис, объектно-ориентированное программирование и асинхронное программирование.
Подробнее о курсе
Фронтенд-разработчик с нуля
Погрузитесь в мир веб-разработки, освоив основные инструменты работы: HTML, CSS, JavaScript
Подробнее о курсе
Разработка приложений на Flutter и Dart
Научись создавать кроссплатформенные приложения на Flutter, освой язык Dart
Подробнее о курсе
Автоматизированное тестирование на Python
Изучите автоматизацию тестирования на Python чтобы стать востребованным специалистом
Подробнее о курсе
Еще по теме:
img
Java 21 имеет ряд улучшений в производительности и синтаксисе, однако есть подводные камни. В статье расскажем все о рисках и как сделать миграцию безболезненной
img
Готов узнать что такое gRPC, как работает и для чего нужно? Не, не, это не GPRS, не путай! А ещё расскажем про Protobuf!
img
React - это популярная Javascript библиотека для создания интерфейсов. Узнай, почему её выбирают миллионы девелоперов по всему миру
img
Почему стоит выучить C#? Пять сильных причин, от высокой зарплаты до кроссплатформенности
img
SQL или NoSQL, вот в чём вопрос! И как раз с этим вопросом мы поможем сегодня разобраться. Что использовать в каких случаях, где есть какие преимущества и как возможно использовать их все вместе.
ЛЕТНИЕ СКИДКИ
30%
40%
50%
До конца акции: 30 дней 24 : 59 : 59