Автор оригинала: Cem Eygi.
Если вы знакомы с программированием, вы уже знаете, какие функции делают и как их использовать. Но что такое функция обратного вызова? Функции обратного вызова – важная часть 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 миллисекунды)
Другими словами, функция сообщения называется после того, как что-то произошло (через 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 – это язык программирования, ориентированным на события. Мы также используем функции обратного вызова для деклараций событий. Например, скажем, мы хотим, чтобы пользователи нажимают на кнопку:
На этот раз мы увидим сообщение на консоли только тогда, когда пользователь нажимает на кнопку:
document.queryselector("#callback-btn")
.addEventListener("click", function() {
console.log("User has clicked on the button!");
});Итак, здесь мы сначала выбираем кнопку с его идентификатором, а затем добавляем слушатель события с методом AddeventListener. Требуется 2 параметра. Первый – это его тип, «Нажмите», и второй параметр – это функция обратного вызова, которая регистрирует сообщение при нажатии кнопки.
Как видите, функции обратного вызова также используются для деклараций событий в JavaScript.
Заворачивать
Обратные вызовы часто используются в JavaScript, и я надеюсь, что этот пост поможет вам понять, что они действительно делают и как работать с ними проще. Далее вы можете узнать о обещаниях JavaScript, которая является аналогичной темой, которую я объяснил в моем новом посте.
Если вы хотите узнать больше о веб-разработке, не стесняйтесь Следуй за мной на YouTube Действительно
Спасибо за чтение!
Оригинал: “https://www.freecodecamp.org/news/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/”