функции обратного вызова JavaScript; еще одна важная концепция, которую вам необходимо понять. В противном случае вы можете столкнуться с множеством проблем, чтобы стать успешным разработчиком javascript. Но я уверен, что после тщательного прочтения этой статьи вы сможете преодолеть любые препятствия, с которыми вы сталкивались ранее, связанные с обратными вызовами.
Прежде я расскажу подробнее о callback-функции, но для начала вам нужно иметь какой-то минимальный уровень знаний о функциях. Я имею в виду, что вы должны знать, что такое функция, как она на самом деле работает, какие существуют типы функций и т. д.
Краткий обзор: функция Javascript
Что такое функция?
Функция — это логический строительный блок, внутри которого записан набор кодов для выполнения определенной задачи. На практике функции позволяют писать код более организованным образом, который также легко отлаживать и поддерживать. Функции также позволяют повторно использовать код.
Вы определяете функцию один раз и вызываете ее, когда вам нужно, без написания одних и тех же кодов снова и снова.
Синтаксис объявления функции
Мы немного поговорили о том, что такое функция. Теперь давайте посмотрим, как объявить функцию в javascript.
1. Использование конструктора функций. В этом подходе функция создается с помощью конструктора «Функция». Технически этот подход менее эффективен, чем объявление функции с синтаксисом выражения функции и синтаксисом оператора объявления функции.
2. Использование функционального выражения. Обычно этот подход аналогичен назначению переменной. Проще говоря, тело функции рассматривается как выражение, и это выражение присваивается переменной. Функции, определенные с помощью этого синтаксиса, могут быть именованными или анонимными.
Функция, не имеющая имени, называется анонимной функцией. Анонимная функция вызывается сама, то есть вызывается автоматически. Такое поведение также известно как немедленно вызываемое функциональное выражение (IIFE).
3. Использование оператора объявления функции. На самом деле, этот метод является методом старой школы, который обычно используется в javascript. Здесь после ключевого слова «функция» необходимо указать имя функции. После этого, если функция принимает несколько параметров или аргументов; их тоже нужно упомянуть. Хотя эта часть совершенно необязательна.
В теле функции функция должна возвращать значение вызывающей стороне. После того, как оператор return будет найден, функция перестанет выполняться. Внутри функции параметры будут действовать как локальная переменная.
Кроме того, переменные, объявленные внутри функции, будут локальными для этой функции. Доступ к локальным переменным возможен только внутри этой функции, поэтому переменные с одним и тем же именем можно легко использовать в разных функциях.
Вызов функции
Объявленная ранее функция будет вызываться, когда произойдет одно из следующих событий:
- Например, когда происходит событие, пользователь нажимает кнопку или выбирает какой-либо параметр из раскрывающегося списка и т. д.
- Когда функция вызывается из кода javascript.
- Функция также может быть вызвана автоматически, мы уже обсуждали это в выражении анонимной функции.
Оператор () вызывает функцию.
Что такое функция обратного вызова Javascript?
Согласно MDN: функция обратного вызова — это функция, передаваемая в другую функцию в качестве аргумента, которая затем вызывается внутри внешней функции для выполнения какой-либо процедуры или действия.
Я знаю, что после прочтения этого технического определения вы сбиты с толку и с трудом понимаете, что такое функция обратного вызова.
Позвольте мне объяснить это простыми словами, функция обратного вызова — это функция, которая будет выполняться сразу после завершения выполнения другой функции. Функция обратного вызова — это функция, которая передается в качестве аргумента другой функции javascript. Эта функция обратного вызова выполняется внутри функции, в которую она была передана.
В javascript функции рассматриваются как объекты первого класса. Говоря об объекте первого класса, мы имеем в виду, что с числом, функцией или переменной можно обращаться так же, как с любой другой сущностью в языке. Будучи объектом первого класса, мы можем передавать функции другим функциям, поскольку переменные и функции также могут быть возвращены из других функций.
Функции, которые могут это сделать, известны как функции высшего порядка. Функция обратного вызова на самом деле является шаблоном. Слово «шаблон» означает своего рода проверенную методологию для решения общей проблемы в разработке программного обеспечения. Там использование функции обратного вызова лучше назвать шаблоном обратного вызова.
Зачем нам нужен обратный вызов Javascript?
Клиентский javascript запускается в браузере, а основной процесс браузера представляет собой однопоточный цикл событий. Если мы попытаемся выполнить длительные операции в однопоточном цикле обработки событий, процесс будет заблокирован. Технически это плохо, потому что процесс перестает обрабатывать другие события, ожидая завершения вашей операции.
Например, оператор «оповещение» считается одним из кодов блокировки в javascript в браузере. Если вы запустите оповещение; вы больше не можете выполнять какие-либо действия в браузере, пока не закроете диалоговое окно предупреждения. Чтобы предотвратить блокировку длительных операций, используется обратный вызов.
Давайте углубимся, чтобы вы точно поняли, в каком сценарии используется обратный вызов.
В приведенном выше фрагменте кода сначала выполняется функция getMessage(), а затем выполняется displayMessage(). Оба отображали сообщение в окне консоли браузера, и оба выполнялись немедленно.
Но в определенных ситуациях некоторые коды не выполняются сразу. Например, если мы предположим, что функция getMessage() выполняет вызов API, где мы должны отправить запрос на сервер и дождаться ответа, то как мы сможем с этим справиться?
Просто, чтобы справиться с таким сценарием, нам нужно использовать функции обратного вызова в javascript.
Как использовать функцию обратного вызова Javascript?
Вместо того, чтобы рассказывать вам о синтаксисе функций обратного вызова javascript, я думаю, что было бы лучше, если мы попытаемся реализовать функцию обратного вызова в нашем предыдущем примере. Фрагмент кода показан ниже на следующем снимке экрана.
Чтобы использовать функцию обратного вызова, нам нужно выполнить какую-то задачу, которая не сможет отображать результаты немедленно. Чтобы эмулировать это поведение, мы используем функцию javascript setTimeout(). Этой функции потребуется 2 секунды, чтобы отобразить сообщение «Привет, там» в окне консоли.
После отображения этого сообщения в окне консоли браузера появится «Отображаемое сообщение». Таким образом, в этом сценарии сначала мы ожидаем функцию getMessage(), а после успешного выполнения этой функции мы выполняем функцию displayMessage().
Как работает обратный вызов Javascript?
Позвольте мне объяснить, что на самом деле произошло за кулисами в предыдущем примере.
Как видно из предыдущего примера, в функцию getMessage() мы передаем два аргумента; первый аргумент — это переменная «msg», которая отображается в окне консоли браузера, а второй аргумент — это функция «обратный вызов».
Теперь вы можете задаться вопросом, почему функция «обратный вызов» передается в качестве аргумента. Это потому, что для реализации функции обратного вызова мы должны передать функцию в качестве аргумента другой функции.
После того, как функция getMessage() завершит свою задачу, мы вызываем эту функцию «callback()». После этого, когда мы вызываем функцию getMessage(), мы передаем ссылку на функцию displayMessage(), которая обрабатывается как функция обратного вызова.
Обратите внимание, что при вызове функции getMessage() мы передаем ссылку только на функцию displayMessage. Вот почему вы не увидите рядом с ним оператора вызова функции, т. е. «()».
Является ли обратный вызов Javascript асинхронным?
Javascript считается однопоточным языком сценариев. Термин «однопоточный» означает, что javascript выполняет один блок кода за раз. Когда javascript занят выполнением одного блока, он не может перейти к следующему блоку.
Другими словами, мы можем сказать, что код javascript всегда блокирует по своей природе. Но эта блокирующая природа не позволяет нам писать код в определенных ситуациях, когда мы не можем получить немедленный результат после выполнения некоторых конкретных задач.
Я говорю о таких задачах, как следующее.
- Отправка вызова API на определенную конечную точку для получения данных.
- Отправка сетевого запроса на получение некоторого ресурса (например, текстового файла, файла изображения, двоичного файла и т. д.) с удаленного сервера.
Что такое Javascript Callback Hell?
Ад обратного вызова возникает, когда несколько асинхронных функций выполняются одна за другой. Его также называют пирамидой судьбы.
Предположим, вы хотите получить список всех пользователей github, затем среди пользователей вы хотите найти только ведущих участников для репозитория javascript. Затем среди лиц вы хотите получить сведения о человеке, которого зовут Джон.
Для реализации этой функциональности с помощью обратных вызовов фрагмент кода будет похож на показанный ниже.
Из приведенного выше фрагмента кода видно, что код становится сложнее понять, сложнее поддерживать, а также сложнее модифицировать. Это происходит из-за вложенности всех callback-функций.
Как остановить Callback Hell?
Чтобы избежать ада обратных вызовов, можно использовать следующие методы.
- С помощью обещаний.
- С помощью асинхронного ожидания
- С помощью библиотеки async.js
Я уже обсуждал, как работать с промисами и как async await может помочь избежать ада обратных вызовов.
Используя библиотеку Async.js
Давайте поговорим о работе с библиотекой async.js, чтобы избежать callback hell.
Согласно официальному веб-сайту async.js: Async — это служебный модуль, предоставляющий простые и мощные функции для работы с асинхронным JavaScript.
Всего Async.js предоставляет около 70 функций. Сейчас мы обсудим только два из них: async.waterfall() и async.series().
асинхронный водопад ()
Это полезно, когда вы хотите запустить несколько задач одну за другой, а затем передать результат предыдущей задачи следующей задаче. Он принимает массив функций «задачи» и последнюю функцию «обратного вызова», которая вызывается после завершения всех функций в массиве «задачи» или вызывается «обратный вызов» с объектом ошибки.
асинхронная серия()
Эта функция полезна, когда вы хотите запустить функции, а затем вам нужно получить результаты после успешного выполнения всех функций. Основное различие между async.waterfall() и async.series() заключается в том, что async.series() не передает данные из одной функции в другую.
Обратный вызов Javascript против закрытия
Закрытие
С технической точки зрения, замыкание — это комбинация функций, которые объединены вместе и имеют ссылки на окружающее их состояние.
Проще говоря, замыкание позволяет получить доступ к области видимости внешней функции из внутренней функции.
Чтобы использовать замыкание, нам нужно определить функцию внутри другой функции. Затем нам нужно вернуть его или передать другой функции.
Перезвони
Концептуально обратные вызовы похожи на закрытие. Обратный вызов — это когда функция принимает другую функцию в качестве аргумента.
Заключительные слова
Я надеюсь, что эта статья рассеет все ваши сомнения относительно функций обратного вызова javascript. Если вы считаете эту статью полезной, поделитесь ею с другими.
Первоначально опубликовано по адресу: https://www.devhelperworld.in
