Функция обратного вызова JavaScript – объяснение простому английскому

1655995815 funkcziya obratnogo vyzova javascript – obyasnenie prostomu anglijskomu

Каждый начинающий JavaScript хотя бы раз столкнется со следующим вопросом: «Что такое функция обратного вызова?»

Что ж, мы можем найти ответ в слове обратный звонок себя. Все дело в уведомлении абонента об успешном завершении или провале задания.

В этой статье я сосредоточусь меньше на технических аспектах обратных вызовов и попробую объяснить, как они работают на естественном языке. Это должно помочь вам понять, что a callback function есть и почему она существует.

Если вы новичок в JavaScript, то эта статья будет точно для вас.

Если вы также хотите учиться с видеоконтента, эта статья также доступна как видеоурок здесь: 🙂

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

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

function doubleEven(n) {
    if (n % 2 === 0) {
    	return n * 2;
    }
    return n;
}

Теперь вы можете использовать эту функцию в необходимых местах:

doubleEven(10); // Output, 20
doubleEven(5); // Output, 5

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

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

/** 
Let's create a foo function that takes a
function as an argument. Here we invoke 
the passed function bar inside foo's body.
*/
function foo(bar) {
    bar();
}

Ладно, как теперь вызвать foo?

/**
Invoke foo by passing a function as an argument.
*/
foo(function() {
    console.log('bar');
}); // Output, bar

Обратите внимание, что мы передали все определения функции как аргумент foo. Передаваемая функция не имеет имени. Оно называется anonymous function.

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

Вызывающая функцию может передать другую функцию как аргумент для выполнения на основе любого триггера. Давайте разберемся в этом из Robin and PizzaHub история.

пицца
Робин и история PizzaHub

Робин, маленький мальчик из страны чудес, любит есть пиццу. Однажды утром он берет трубку матери и заказывает пиццу с помощью программы PizzaHub. Робин выбирает свою любимую пиццу барбекю с творогом и нажимает кнопку заказать.

Приложение PizzaHub регистрирует заказ и сообщает Робин, что будет notify его, когда пицца будет готова и в пути. Робин, счастливый мальчик, ждет некоторое время и наконец-то получает notification подтверждая, что пицца уже в пути!

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

  • Робин orders пицца
  • Приложение notes down заказ
  • PizzaHub prepares пиццу, и спустя некоторое время она готова.
  • Приложение notifies Робин, подтверждаю, что пицца уже в пути.

Механизм оповещения Робина о пицце работает с помощью callback функция.

Давайте напишем историю на языке программирования

Да, давайте это сделаем. Вышеприведенная последовательность событий – это набор операторов, которые мы можем логически поместить в функции.

Сначала Робин заказывает пиццу. Приложение регистрирует заказ, вызывая функцию, например:

orderPizza('Veg', 'Cheese Barbeque');

Теперь orderPizza() функция, живущая где-то на сервере PizzaHub, может выполнять некоторые из этих действий (на самом деле она может производить гораздо больше, чем это, но давайте будем простыми):

function orderPizza(type, name) {
    console.log('Pizza ordered...');
    console.log('Pizza is for preparation');
    setTimeout(function () {
        let msg = `Your ${type} ${name} Pizza is ready! The total bill is $13`;
        console.log(`On the Pizzahub server ${msg}`);
    }, 3000);
}

The setTimeout функция показывает, что приготовление пиццы занимает некоторое время. Мы регистрируем сообщения в консоли после того, как пицца будет готова. Однако есть проблема!

Сообщение регистрируется на странице PizzaHub сторона, а бедный Робин не имеет этого понятия. Нам надо notify он говорит, что пицца готова.

Представляем функцию обратного вызова

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

function orderPizza(type, name, callback) {
    console.log('Pizza ordered...');
    console.log('Pizza is for preparation');
    setTimeout(function () {
        let msg = `Your ${type} ${name} Pizza is ready! The total bill is $13`;
        callback(msg);
    }, 3000);
}

Теперь давайте внесем изменения в вызов orderPizza функция:

orderPizza('Veg', 'Cheese Barbeque', function(message){
	console.log(message);
});

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

Обобщить:

  • Функция JavaScript может принимать другую функцию в качестве аргумента.
  • Передача функции как аргумента является мощной концепцией программирования, которая может быть использована для оповещения абонента о том, что произошло. Она также известна как функция обратного вызова.
  • Вы можете использовать функции обратного вызова, чтобы сообщить абоненту в зависимости от случая использования. Обратные вызовы также используются для выполнения определенных задач в зависимости от состояния (пройден, не удалось) других задач.
  • Но будьте осторожны – вложение слишком большого количества функций обратного вызова может быть не очень хорошей идеей и может создать Callback Hell. Подробнее об этом мы узнаем в следующей статье.

Спасибо за прочтение! Вы можете узнать больше из этого репозитария с открытым кодом об асинхронном программировании. Не забудьте попробовать викторину.

GitHub — atapas/promise-interview-ready: Изучите JavaScript Promises по-новому. В этом хранилище содержится весь исходящий код и примеры, которые готовят вас с обещаниями, особенно для ваших интервью 😉.

Изучите обещания JavaScript по-новому. В этом хранилище содержится весь исходящий код и примеры, которые готовят вас с обещаниями, особенно для ваших интервью 😉. — GitHub — atapas/promise-inte…

cdfa9fdb-ae1f-4784-93be-339c6794f31e

Не забудьте поставить ⭐. Это мотивирует.

Это все, что сейчас. Надеюсь, эта статья была для вас содержательной и познавательной.

Давайте подключаем. Вы можете подписаться на меня в Twitter (@tapasadhikary), на моем канале YouTube и GitHub (atapas).

Вам интересно узнать больше о асинхронных концепциях JavaScript? Вот несколько ссылок, которые помогут вам:

Добавить комментарий

Ваш адрес email не будет опубликован.