Функции обратного вызова (callback function) — важная часть языка программирования JavaScript. Разобравшись с ней, ваши навыки в JS значительно улучшатся. В этой стать мы подробно рассмотрим, что это такое и как использовать функции обратного вызова в JavaScript на нескольких примерах.
Что такое функция обратного вызова?
В JavaScript функции являются объектами. Можем ли мы передавать функции объекты в качестве параметров? Да. Следовательно, мы также можем передавать функции в качестве параметров другим функциям и вызывать их внутри внешних функций. Звучит сложно? Давайте разберем на примере ниже:
|
Функция print() принимает другую в качестве параметра и вызывает её внутри. Это допустимо в JavaScript, и мы называем это «функцией обратного вызова» (callback). То есть функция, которая передается другой функции в качестве параметра, является функцией обратного вызова. Но это еще не всё.
Зачем нужны функции обратного вызова?
JavaScript выполняет код последовательно в порядке сверху вниз. Однако бывают случаи, когда код выполняется (или должен выполняться) после того, как происходит что-то другое, и тоже не последовательно. Это называется асинхронным программированием.
Обратные вызовы позволяют убедиться, что функция не будет запущена до выполнения задачи, а будет запущена сразу после ее завершения. Это помогает нам разрабатывать асинхронный код JavaScript и защищает нас от проблем и ошибок.
В JavaScript способ создания функции обратного вызова заключается в том, чтобы передать ее в качестве параметра другой функции, а затем вызвать ее обратно сразу после того, как что-то произошло или какая-то задача была выполнена.
Как создать обратный вызов
Давайте начнем с простого примера. Мы хотим вывести сообщение в консоль, но оно должно появиться там через 3 секунды.
|
В JavaScript есть встроенный метод «setTimeout», который вызывает функцию или оценивает выражение через заданный период времени (в миллисекундах). Так, здесь функция «message» вызывается по истечении 3 секунд. (1 секунда = 1000 миллисекунд).
Другими словами, функция message вызывается после того, как что-то произошло (в данном примере прошло 3 секунды), но не раньше. Таким образом, функция message является примером функции обратного вызова.
Что такое анонимная функция?
В качестве альтернативы мы можем определить функцию непосредственно внутри другой функции, а не вызывать ее. Это будет выглядеть следующим образом:
|
Как мы видим, функция обратного вызова здесь не имеет имени, а определение функции без имени в JavaScript называется «анонимной функцией». Она выполняет точно такую же задачу, как и в примере выше.
Обратный вызов как функция-стрелка
При желании вы можете написать ту же функцию обратного вызова в виде стрелочной функции ES6, которая является более новым типом функций в JavaScript:
|
Что насчет событий?
JavaScript — это язык программирования, основанный на событиях. Мы также используем функции обратного вызова для обработки событий. Например, представим, что мы хотим, чтобы пользователь нажал на кнопку:
|
В этом случае сообщение будет появляться в консоли только тогда, когда пользователь нажмёт на кнопку:
|
Здесь мы сначала выбираем кнопку по её id, а затем добавляем обработчик событий с помощью метода addEventListener. Он принимает 2 параметра. Первый — это тип события, в данном случае «click», а второй параметр — это функция обратного вызова, которая выводит сообщение в консоль при нажатии на кнопку.
Как видите, функции обратного вызова также используются для обработки событий в JavaScript.
Надеемся, что эта статья помогла вам лучше понять функции обратного вызова, что они делают и как с ними проще работать.
Успехов в JavaScript!
