Функции обратного вызова JavaScript - что такое обратные вызовы в JS и как их использовать

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

Итак, в этом посте я хотел бы помочь вам понять, что такое функции обратного вызова и как их использовать в JavaScript, рассмотрев несколько примеров.

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

В JavaScript функции - это объекты. Можем ли мы передавать объекты функциям в качестве параметров? Да.

Таким образом, мы также можем передавать функции в качестве параметров другим функциям и вызывать их внутри внешних функций. Звучит сложно? Позвольте мне показать это на примере ниже:

function print(callback) { callback(); }

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

Вы также можете посмотреть видеоверсию функций обратного вызова ниже:

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

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

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

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

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

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

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

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

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

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

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

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 - это язык программирования, управляемый событиями. Мы также используем функции обратного вызова для объявления событий. Например, допустим, мы хотим, чтобы пользователи нажимали кнопку:

Click here

На этот раз мы увидим сообщение на консоли только тогда, когда пользователь нажмет на кнопку:

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

Итак, здесь мы сначала выбираем кнопку с ее идентификатором, а затем добавляем прослушиватель событий с помощью метода addEventListener. Требуется 2 параметра. Первый - это его тип, «щелчок», а второй параметр - функция обратного вызова, которая регистрирует сообщение при нажатии кнопки.

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

Заворачивать

Обратные вызовы часто используются в JavaScript, и я надеюсь, что этот пост поможет вам понять, что они на самом деле делают и как с ними проще работать. Затем вы можете узнать о обещаниях JavaScript, которые аналогичны теме, которую я объяснил в своем новом сообщении.

Если вы хотите узнать больше о веб-разработке, подписывайтесь на меня на Youtube !

Спасибо за чтение!