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

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

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

В 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!