что такое функция обратного вызова, что такое обратные вызовы и что такое ад обратных вызовов и почему эта концепция ада введена в JavaScript?
когда я узнаю об обратных вызовах, мне приходит в голову вышеупомянутый вопрос, который говорит мне, что сначала найди меня, и тогда ты получишь то, что тебе нужно.
это немного запутанный вопрос?.. игнорируйте его, если вы не поняли
Это моя самая длинная и самая большая статья, пожалуйста, наберитесь терпения и делайте перерывы, когда будете понимать эту статью. Если что-то не так, признайте меня 😁😁.
Давайте углубимся в наши обратные вызовы?
давайте перейдем к основам. Просто обратные вызовы — это не что иное, как функции. Но нам нужно знать кое-что еще, например, если это функции, значит, почему они вызываются как функции обратного вызова.
Тогда что такое обратный вызов?
Обратный вызов — это не что иное, как некоторая часть исполняемой функции, которая выполняется после того, как что-то произошло в вызывающей функции во время выполнения этой функции.
что означает, что что-то произошло?
Вы получите ясность на приведенном ниже примере, не путайте?
Хорошо, давайте научимся на простом примере, пожалуйста, не скучайте и не засыпайте, поверьте мне, вы получите все, что вам нужно знать о обратном вызове, функции обратного вызова и аду обратного вызова.
предположим, что мы создаем какой-то веб-проект, который скоро закончится.
если мы создадим что-то классное, нам нужен отличный план с отличным клиентом
Шаг 1. Получите один отличный веб-проект от анонимного клиента
Шаг 2: Обсуждение проекта разработки
Шаг 3. Начните разработку своего отличного проекта
Шаг 4. После завершения разработки отправьте на тестирование отличный проект.
Шаг 5. После успешного завершения тестирования разверните проект.
В процессе вы должны думать, что каждый шаг — это отдельная функция, и выполнять ее, чтобы добиться прогресса в разработке.
Давайте посмотрим на код, чтобы вы поняли, о чем я говорю.
можете ли вы наблюдать вывод, который каждая функция выполняет упорядоченно и одну за другой, но здесь мы не можем использовать обратный вызов
так что же такое обратный вызов
Не путайте
мы добавляем несколько строк в приведенный выше код, после чего мы можем увидеть обратный вызов
Здесь мы видим, что каждая функция является передачей по ссылке на аргументы функции Start, которые эти функции-аргументы вызывают в функции Start. Эти функции-аргументы можно назвать функциями обратного вызова.
Следовательно, мы можем сказать, что функция передается в качестве аргумента другой функции, вызываемой как функция обратного вызова, а не функция обратного вызова
Теперь мы можем видеть, что именно означают обратные вызовы?
вы можете подумать, что функции, которые вызываются внутри функций, называются обратными вызовами
Тогда я могу сказать…
Но не совсем неправильно, что я пытаюсь сказать, что
вызов внутри функций, которые называются обратными вызовами, правилен и имеет смысл. Но кое-что правильное и не имеет смысла, когда дело доходит до того, что на самом деле является обратными вызовами.
В приведенных выше шагах клиент ничего не знает об обсуждении, разработке, тестировании, развертывании, клиент будет знать только об идее, и он знает, что должен вызвать getProject()
например, клиент говорит: «Эй, у меня есть отличная идея, вы можете реализовать мою идею и развернуть мой сайт в браузере. Это то, что хочет клиент».
точно так же разработчик не будет перемещать проект прямо на веб-сайт без тестирования.
Они должны следить за процессом.
вы следуете приведенному ниже коду, который вы ясно понимаете
Давайте углубимся в код. Тогда вы будете знать о том, что я говорю ..
Здесь мы можем предположить, что функция Start действует как клиент.
Тогда функция Start не знает о том, что разрабатывается, тестируется и развертывается, тогда почему функция Start выполняет все остальные функции, кроме функции getProject()
Внимательно прочитайте предыдущие 3 строки, если у вас возник вопрос.
Вопрос в том, почему чертова функция Start выполняет все остальные функции, кроме getProject()
Здесь обратные вызовы — наши спасители, и они имеют смысл для приведенной выше идеи, и реализация приведенного выше кода позволяет увидеть приведенный ниже код.
Обратите внимание, что приведенный выше вывод такой же, как и предыдущий вывод, но есть разница между способами реализации.
Хорошо, не путайте, я извлеку каждую функцию в приведенном выше коде.
1.Клиентская функция вызывает getProject() и наблюдает, что клиент не знает об обсуждении, разработке, тестировании и развертывании, поэтому клиент вызывает getProject, который находится внутри Client()
2. Например, мы не можем обсудить это до получения проекта от клиента. Затем вызывается startDiscuss после получения проекта в getProject()
3. У команды нет идеи о разработке проекта до обсуждения. Поэтому StartDeveloping вызывается после обсуждения в функции startDiscuss().
4. Тестер не может тестировать без какого-либо проекта. Мы хотим что-то протестировать, тогда нам нужно что-то протестировать. Затем, после того как разработчик разработает проект и вызовет startTesting внутри функции startDeveloping()
5. Наконец, без тестирования любого приложения или продукта мы не можем развернуть наш сайт или выпустить продукт на рынок, поэтому после успешного завершения тестирования в startTesting вызывается функция Deploy()
6.Развертывание завершено, конец
Внимательно следите за каждым шагом, он зависит от предыдущего шага.
Это означает, что каждая функция может вызывать обратный вызов какой-либо другой функции. Но прежде звонить только после того, как что-то произошло или выполнили инструкции в этой функции.
ТОГДА ЧТО ТАКОЕ КОЛБЭК АД 🔥🔥🔥?
Просто такое вложение считается адом обратных вызовов.
С этими адами мы теряем полную читабельность кода. Это затрудняет понимание кода
Тогда почему эти адские обратные вызовы введены в JavaScript?
Возможно, у вас есть эти сомнения?
Вы видите, что все функции выполняются синхронно. Но что произойдет, если они будут выполняться асинхронно?
Если вы не знаете об асинхронном JavaScript и циклах обработки событий, щелкните по этой ссылкеЭто отличное объяснение, которое я когда-либо видел у Филиппа Робертса в Js confs
В приведенном выше примере мы не предусматриваем никаких ограничений по времени. Подобно тому, как функция должна вызывать любую функцию обратного вызова, прежде чем эта функция скажет, подождите некоторое время, пока моя работа не завершится, тогда я позвоню вам.
Давайте посмотрим, как мы добавим асинхронный код в наш первый пример и проверим, что произойдет?
Приведенный выше код работает нормально, но не так. Точно нет
Все работает нормально из-за очереди обратного вызова в java-скрипте, вы снова не знаете об очереди обратного вызова нажмите на эту ссылку
Эта очередь выполняется по принципу «первым пришел — первым обслужен», как и структура данных очереди.
очередь обратного вызова делает, какая функция должна быть завершена за время ожидания, и эта функция должна быть перемещена в очередь обратного вызова. Эта очередь обратного вызова - это функция, которая вводится первой в очереди, эта функция будет выполняться, поэтому в приведенном выше коде мы указываем, что все время ожидания такое же, тогда оно будет работать так же, как в первом примере.
Но посмотрим, что произойдет, мы дадим другое время ожидания.
Да, мы совершили большую ошибку. Помните, что очередь обратных вызовов выполняется с наименьшим временем ожидания, поэтому из-за этого типа асинхронных действий мы можем правильно обрабатывать их с помощью концепции обратных вызовов.
Давайте посмотрим, как писать в коде
Не похоже
соблюдайте осторожность: каждая функция обратного вызова должна вызываться по истечении времени завершения в setTimeout в миллисекундах. Таким образом, каждая функция обратного вызова должна вызываться через некоторое время в приведенном выше коде
Это фактическое использование концепции обратных вызовов в JavaScript
В основном обратные вызовы мы видим в прослушивателях кликов, прокрутки,... событий в ванильном JavaScript.
При нажатии кнопки будет вызываться функция второго параметра. Посмотрите, когда выполняется функция Только нажатие кнопки. Эти функции также являются лучшими примерами функций обратного вызова.
Итак, преодолейте этот ад обратных вызовов. В ES6 появились Promises.
