Автор оригинала: FreeCodeCamp Community Member.
Кевином Кононенко
Обратные вызовы. Асинхронный. Не блокировка.
Эти концепции JavaScript заставляют вас рвать ваши волосы.
Я был там тоже в одной точке. Мне нужна была аналогия, чтобы эти абстрактные понятия были достаточно легкими, чтобы я мог бы научить их кому-то еще (и доказать, что я действительно понимаю их).
Конечно, там было несколько хороших учебных пособий (например это один и это один ). Но каждый учебник мгновенно начался с сложных терминов.
Мне нужно было что-то, к чему я мог бы подключиться.
Мне нужен миньоны.
Итак, я собираюсь использовать эти милые миньоны, чтобы объяснить обратные вызовы. В этой маленькой аналогии вы их мастер. Вы можете заказать свою армию миньонов, чтобы делать все, что вы хотите в вашем коде. Но:
- Есть только один мастер.
- Миньоны должны принимать заказы от вас. Они не могут принимать собственные решения.
Основная концепция
В любое время вы видите «Функция ()» в вашем jQuery или JavaScript внутри другой функции или метода Представьте, что это вместо этого говорит «Миньон ()». Вы не можете на самом деле ввести это, потому что язык JavaScript не распознает «Minion ()» (если вы не создаете фактическую функцию под названием «Minion»). Но это сейчас то, что вы делаете, когда вы создаете функцию обратного вызова – Отдавая заказы на миньоны Отказ
Пример с миньоном готов к заказам
function myFunction(input, function(err, data){});
Это в основном говорит …
function myFunction(input, minion(err, data){});
Пример с простой старой функцией, нет доступен миньон:
function addOne(data){:return data++;
};
Примеры JQuery
Супер базовый
Так что помните, это вроде как сказать:
Что делает обратный вызов здесь?
Вы, мастер/босс, должны следить за событиями во всем файле и потенциально несколько файлов. Вы не получите время для некоторых маленьких jQuery Click Handler! Таким образом, вы делегируете его к миньону, как показано в примере 2.
Теперь это простая функция, и вы, вероятно, могли бы сделать это самостоятельно, но что, если бы это было 20 строк? Вы не можете отвлечься с функцией длиной 20 линий, когда вам нужно также принимать другие инструкции от пользователя!
Итак, вы говорите миньон, чтобы сделать это в строке 1 после того, как пользователь нажимает «.mybutton». Это освобождает вас, чтобы дать другие заказы для большего количества миньонов – гораздо более эффективно, чем делать это самим и делать другие важные функции ждут.
Пример анимации
Давайте посмотрим на последовательность Show/Hide, чтобы действительно выделить важность этих миньонов.
В этом примере, если вы прочитаете код по порядку и не имели миньонов на вашей стороне, консоль будет регистрировать «один», «два», «три». Но у вас есть миньоны, а консоль будет на самом деле Журнал «Один», «Три», «два» в этом случае. Вот почему:
Линия 1: Вы заказали свой первый миньон и продолжали следить за другими событиями, вызванными пользователем.
Строка 2: Ваш первый миньон Прочитайте оператор консоли, затем перешел к строке 3.
Строка 3: Миньон 1 принес еще один миньон, чтобы помочь : Minion 2. В частности, Minion 2 должен сидеть там и дождаться, пока метод Show (), чтобы закончить, прежде чем продолжить его инструкции. Итак, теперь у вас есть два миньона, работающие на вас, одновременно пытается завершить свою работу в рамках функции как можно быстрее!
Миньон 1 теперь перепрыгивает весь путь до строки 7, поскольку Minion 2 должен выполнить строки 4-5. Он читает оператор COUSOLE.LOG, и выполняется – больше нет обратных вызовов, больше нет работы. Миньон 2, доли миллисекунды позади, читает Console.log («два»), а затем гарантирует, что ребенок Div показан в строке 5. Теперь, когда миньон тоже.
Вот невероятно важный урок: Ваши функции обратного вызова Определите заказ, что происходят разные действия Отказ Подумайте о том, насколько это возможно: вы можете убедиться, что одно действие происходит за другим, а не вынуждено создавать одну длинную последовательную строку команды. Это позволяет гораздо больше гибкости. Если вы не могли заставить миньоны выполнять ваши заказы, вам придется сделать все это самостоятельно.
Логика jQuery выше работает только с обратными вызовами, на самом деле. В строке 5, показывая ребенка Div Должен случиться после показа родительской дивы. Вы не можете показать ребенка Div Если родительский девл скрыт. Единственный способ гарантировать, что ребенок Div будет показан после Parent Div – обратный вызов.
Если в приведенном выше примере не было никаких обратных вызовов, линия 5 может вызвать ошибку, потому что метод Show () в строке 3 еще не завершен. Minion 1, который начал в строке 1, проходит задача наряду с завершения линий 4-5 к миньону 2, так что Minion 2 может дождаться завершения метода Show () в строке 3 перед началом работы на 4-5. Это гарантирует MINION 2 начнутся и завершит второе заявление Show () после завершения первого выставки (). Затем Minion 1 перемещается на остальную часть внешней функции, не требуя ждать.
Простые JavaScript и Node.js Примеры
Использование параметров и обратных вызовов
Хорошо, немного сложнее примеру! Строки 2 и 14 являются просто объявлением функций, поэтому давайте пропустим до строки 20, где действие на самом деле начинается. Я назвал функцию опекунов с двумя параметрами. Первый – это объект с заявлениями, которые я в конечном итоге хочу, чтобы мой миньон сообщить. Второй – обратный вызов – функция с именем Revireentorders в этом случае.
Ваш миньон не может сообщить, что вы не разговаривали заказы! Так вот как эти функции выполняются. В строке 20 я позвонил накладки с инструкциями. Поэтому я прыгаю до строки 14, чтобы увидеть, что должна делать функцию оперювных механизмов. По-видимому, он просто кормит эти инструкции в функцию обратного вызова.
В строке 20 я объявил функцию обратного вызова, чтобы быть репортажем, но это может быть чем угодно! Memorizeorders, ToolySpouse, любая другая функция, которую вы называете. Стандартно использовать «Callback» в своей функциональной декларации на линии 14, чтобы убедиться, что другие люди, глядя на ваш код, знают, что должен произойти обратный вызов. Может быть любое другое слово, хотя! Вот пример редактировал, минион.
На всяком фрагменте есть только один миньон на линии 14-15, замена «обратный вызов».
Линия 20: Я называю Downerder. Прохожу по заказу – объект с именем и специальностью. Вторым параметром может быть что-нибудь – строка, функция или что-то еще.
Строка 14-15: Я определяю, что второй параметр на самом деле Должен Будьте функции обратного вызова, поскольку в строке 15 миньон сопровождается (). Итак, в любое время мы называем функцию SpeakeDers, теперь мы знаем, что второй параметр будет функцией. Это резвольдер, в данном случае.
Строка 15: Я знаю из строки 20, что мой миньон должен будет выполнить функцию Reportorders. Получает параметр заказов, объект. Это нужны эти инструкции для успешного доклада.
Строка 2: Переменная заказов из строки 15 теперь ссылается как миниоретиры внутри функции. Функция Reportore Function отделки, а имя и специальность сообщаются.
Обратные вызовы здесь важны для четко проследить путь что объект должен следовать. Без обратных вызовов это будет куча кода в одном порядке с небольшим количеством гибкости для повторного использования функций и изменение по порядку.
Node.js.
Посмотрите на следующий пример, который использует Экспресс и Модуль запроса Отказ Это самый сложный еще один!
Представьте, что пользователь только что исполнил запрос на получение по маршруту/Storedata. Таким образом, мы начинаем в строке 9. Этот пример включает в себя чехлы обратного вызова из всех трех предыдущих примеров.
- Существует обратный вызов в пределах метода в строке 9, аналогично примеру обработчика JQuery Click.
- Существует асинхронное исполнение в строке 14, сосредоточенная вокруг поддельного запроса API, аналогично примеру анимации jQuery.
- Существует параметр обратного вызова, объявленный в строке 13, аналогично примеру ванильного JS.
Чтобы сделать это как можно более четко, вот код, если бы код, если с номерами миньонов, указывающих на порядок, в котором они будут выполняться.
Строка 9: Пользователь бьет по маршруту. Вы, босс, заказывайте миньон 1, чтобы приступить к работе по вашим заказам. Он прыгает вниз до линии 10 и видит функцию readResult. Теперь вы можете ждать больше сигналов от пользователя, пока ваши миньоны на работе.
Строка 14: Minion 1 видит вызов запроса, выполняет его на поддельных API, а заказывает миньон 2, чтобы дождаться результата. Миньон 1 может перейти к другой работе. Поскольку больше нет, миньон 1 сдирается в долгу.
Строка 14: Миньон 2 пинает в действие, когда запрос Call завершен. Теперь он несущий три части потенциально важной информации от маршрута, реагирования и тела.
Линия 15-16 : Глобальная переменная «Результаты» устанавливаются на значение тела. Эта глобальная переменная теперь может быть использована в других функциях. Minion 2 рассказывает Minion 3, что пришло время добиться работы по его инструкциям. Миньон 3 Первоначально получил инструкции линия 10 и ждал, чтобы завершить их, пока он не был называть. Сейчас самое время для завершения Logrees ()!
Линия 5 : И инструкции … Console.log. Это было разочаровывающе. В любом случае, Minion 3 сделан сейчас.
Итак, как HEC CECK 3 звонил после миньона 2?
Какой-то миньон-нос?
Если вы вернетесь к узлу пример 1 код, вы увидите, что строка 13 инициализирует обратный вызов. Это означает, что каждый раз, когда вызывается функция readResult (), должен быть параметр обратного вызова. Это устанавливает обратный вызов для использования позже в строке 16. В строке 16 обратный вызов имеет возможность использовать продукты запроса API в строке 14, потому что Запрос звонка имеет свой обратный вызов !
Представьте себе, если обратный вызов/Minion3 был строкой ниже линии 17, за пределами объема вызова запроса. Прежде всего, это сделает его Minion 2, так как он будет выполнен до завершения звонка запроса. И результаты запроса запроса еще не будут доступны, что сделало бы всю эту функцию довольно бессмысленной. Весь смысл заключается в том, чтобы сделать запрос Call, затем пропустите результаты.
Опять же, использование 2 отдельных обратных вызовов в функции readResult () гарантирует, что Minion 3 идет на работу после завершения запроса. Обратные вызовы обеспечивают уровень контроля, поэтому вы можете определить этот заказ на заказ.
Заключение
Вы являетесь мастером Миньона, с полчищами визуализации маленьких слуг, готовых сделать ваши предложения. Если вы можете дать им правильные инструкции, они могут сделать вашу жизнь намного проще. Они делают всю тяжелую работу, и позволит вам слушать инструкции пользователя.
Это помогло тебе? Дай мне знать в комментариях.