Понимание callback-функций (колбеков)
Функции — это объекты
Чтобы понимать callback-функции, нужно понимать обычные функции. Это может показаться банальностью, но функции в Javascript’е — немного странные штуки.
Преимущество концепции «функция-как-объект» заключается в том, что код можно передавать в другую функцию точно так же, как обычную переменную или объект (потому что в буквальном понимании код — всего лишь объект).
Передача функции как callback-функции
Передавать функцию в качестве аргумента просто.
Может показаться глупостью создавать такой перемудрённый код, когда можно вернуть значение нормальным способом, но существуют ситуации, в которых это непрактично и callback-функции необходимы.
Не загромождайте выход
Традиционно функции в ходе выполнения принимают на вход аргументы и возвращают значение, используя выражение return (в идеальном случае единственное выражение return в конце функции: одна точка входа и одна точка выхода). Это имеет смысл. Функции — это, в сущности, маршруты между вводом и выводом.
Javascript даёт возможность делать всё немного по-другому. Вместо того чтобы дожидаться, пока функция закончит выполняться и вернёт значение, мы можем использовать callback-функции, чтобы получить его асинхронно. Это полезно для случаев, когда требуется много времени для завершения, например, при AJAX-запросах, ведь мы не можем приостановить браузер. Мы можем продолжить заниматься другими делами в ожидании вызова колбека. Фактически, очень часто от нас требуется (или, точнее, нам настоятельно рекомендуется) делать всё асинхронно в Javascript’е.
Вот более детальный пример, в котором используется AJAX для загрузки XML-файла и используется функция call() для вызова callback-функции в контексте запрошенного объекта (это значит, что когда мы укажем ключевое слово this внутри callback-функции, оно будет ссылаться на запрошенный объект):
В этом примере мы создаём объект httpRequest и загружаем файл XML. Типичная парадигма возвращения значения в конце функции тут больше не работает. Наш запрос обрабатывается асинхронно, а это означает, что мы начинаем запрос и говорим ему вызвать нашу функцию, как только он закончится.
Мы используем здесь две анонимных функции. Важно помнить, что нам бы не составило труда использовать и именованные функции, но во имя лаконичности мы сделали их вложенными. Первая анонимная функция выполняется всякий раз при изменении статуса в нашем объекте httpRequest. Мы игнорируем это до тех пор, пока состояние не будет равно 4 (т.е. запрос выполнен) и статус будет равен 200 (т.е. запрос выполнен успешно). В реальном мире вам бы захотелось проверить, не провален ли запрос, но мы предполагаем, что файл существует и может быть загружен браузером. Эта анонимная функция связана с httpRequest.onreadystatechange, так что она выполняется не сразу, а вызывается каждый раз при изменении состояния в нашем запросе.
Callback-функции в JavaScript
Если вы не имеете большого опыта работы с JavaScript, но уже использовали JQuery, то, возможно, вы уже использовали функции обратного вызова. Но, может быть, вы не до конца понимаете, как они работают или как они устроены?
В этом посте, который базируется на том, что я изучил по функциям обратного вызова, я попытаюсь просветить вас по этой JavaScript технике.
Что такое callback-функции?
Статья из Wikipedia говорит:
Ссылка на исполняемый код, или на фрагмент исполняемого кода, который передается в качестве аргумента другого кода.
Далее идет простой пример callback-функции, взятый из JQuery:
Здесь происходит вызов JQuery метода fadeIn(). Этот метод принимает 2 аргумента: скорость fade-in анимации и функция обратного вызова (необязательный параметр). В этой функции вы можете писать все, что угодно.
Когда fadeIn() метод завершится, callback-функция начнет выполняться, если она задана. В зависимости от скорости анимации, вы можете выбрать задержку до начала выполнения функции. Прочитать более подробней о callback-функциях вы можете здесь.
Как писать callback-функции
Если вы пишете свои собственные функции или методы, вам могут понадобиться функции обратного вызова. Далее приведены простые примеры callback-функций:
Здесь мы видим функцию mySandwich, которая принимает 3 параметра. Третий параметр — функция обратного вызова. Когда функция выполняется, она выводит на экран сообщение с переданными значениями. Затем выполняется функция обратного вызова.
Обратите внимание, что фактический параметр mySandwich является просто «callback» (без скобок), но потом, когда мы вызываем callback, мы используем круглые скобки.
Сама функция обратного вызова определена в третьем параметре (function() <…>). Этот код имеет в себе вызов функции alert(), которая говорит, что callback-функция вызвана.
Создание опциональной функции обратного вызова
Все функции обратного вызова в JQuery опциональны, т.е. необязательны. Это означает, что метод, принимающий callback-функцию не будет возвращать ошибку, если функция не передана. В простом примере ниже, будет выведена ошибка, если мы вызовем функцию mySandwich без передачи функции «callback»:
Действие можно увидеть здесь. Если вы откроете свой инструмент разработки, то вы увидите ошибку, которая говорит, что «undefined is not a function» (или что-то подобное), которое показывается после выполнения alert сообщения.
Чтобы сделать callback-функцию необязательной, мы может сделать так:
Теперь callback-функция будет вызвана лишь при условии, что она существует. Никакой ошибки теперь не будет. Протестировать можно здесь.
Убедитесь, что callback является функцией
Наконец, вы можете узнать, что третий аргумент является функцией, если сделаете так:
Заметьте, что мы использовали typeof оператор для проверки типа значения callback параметра. В данном примере мы передали в качестве третьего параметра не функцию, а строку, но ошибки не возникает, т.к. у нас стоит проверка на функцию.
Примечание о времени
Не всегда функция может выполниться тогда, когда нужно. Например, если функция включена в какой-нибудь асинхронный запрос (ajax или анимацию), то callback-функция будет вызвана после начала асинхронного запроса и, возможно, завершиться раньше асинхронного запроса.
Вот пример, в котором используется JQuery animate метод:
Заметьте, что хотя callback-функция расположена после кода анимации, функция обратного вызова выполнится намного раньше, чем закончится анимация. Решить проблему очень просто: мы должны поместить функцию обратного вызова внутрь animate метода (туда, где написано «//Animation complete»).
Хотите что-нибудь добавить?
Для многих JavaScript разработчиков это, возможно, легкий материал. Извините, если вы ждали чего-то более глубокого по этой теме. Если у вас есть, что добавить или исправить, пожалуйста, пишите в комментариях. Мы вместе все обсудим.
Спасибо за внимание!
Автор статьи: Alex. Категория: JavaScript
Дата публикации: 21.05.2013
Введение в колбэк-функции в JavaScript
У этой статьи есть продолжение — там мы рассказываем про работу с сервером и передачу параметров в коллбэк-функции.
При изучении программирования мы привыкаем мыслить последовательно: строки кода выполняются по порядку. Для многих языков это утверждение верно на 100%, но всё начинает меняться, когда речь заходит про асинхронное программирование.
Это статья о том, как работают и зачем нужны колбэк-функции в JavaScript. Это одна из важнейших тем программирования на JavaScript, и ни одна более-менее серьёзная программа не обойдется без применения колбэк-функций.
Что такое колбэк-функция
Колбэк-функция или функция обратного вызова — функция, предназначенная для отложенного выполнения. Проще говоря, она должна быть выполнена после завершения работы другой функции. Чтобы стало понятнее, разберём пример с заказом пиццы.
Колбэк (callback) переводится как «Перезвоните». Действительно, принцип работы колбэков схож с заказом обратного телефонного звонка. Представьте, что вы звоните оператору для заказа пиццы, но срабатывает автоответчик, где приятный голос просит оставаться на линии, пока не освободится оператор, или предлагает заказать обратный звонок. Когда оператор освободится — он перезвонит и примет заказ.
Это прекрасная аналогия для понимания принципов работы колбэков и асинхронности. Вместо ожидания ответа оператора, мы можем заказать обратный звонок и заниматься другими делами. Как только произойдёт колбэк (нам перезвонили), мы сможем выполнить задуманное — заказать пиццу.
Как писать код для колбэков
Посмотрим на колбэки с практической стороны.
Выше мы сказали, что колбэки неразрывно связаны с асинхронностью и позволяют «запланировать» действие, которое будет совершено после выполнения какого-то другого, возможно длительного действия. Пример с заказом пиццы это прекрасно илюстрирует. Давайте посмотрим, как это может выглядеть в коде, но для начала взглянем на синхронный код:
Что в этом коде больше всего бросается в глаза? Правильно — последовательность. Здесь представлен синхронный код, который будет выполнятся последовательно:
Проблема видна невооруженным глазом — пока готовится пицца, мы вынуждены ждать и ничего не делать. Строка readBook() будет выполнена только после приготовления пиццы. Фактически мы начнём читать книгу после приготовления пиццы, а не во время готовки.
Само собой, в реальном мире вместо выпекания пиццы может быть любой долгий процесс, например, запрос на получение данных с сервера.
Такой запрос не выполняется мгновенно: браузеру понадобится время, чтобы найти IP-адрес сервера, установить соединение, передать запрос, дождаться ответа и т.д. Все эти действия занимают разное количество времени. Временные задержки будут постоянно отличаться и зависеть от скорости соединения с сетью, времени выполнения запроса на сервере и некоторых других факторов.
Синхронные запросы к серверу будут блокировать дальнейшее выполнение веб-приложения, и это уже очень плохо. Представьте, что каждый раз при отправке запроса к серверу интерфейс вашего приложения становится полностью недоступным.
Эту проблему решает асинхронность, и длительные операции лучше выполнять именно асинхронно. В этом варианте мы как бы откладываем длительную операцию «на потом» и вместо ожидания завершения выполняем другой код. В этой схеме прозрачно всё, кроме вопроса: «Как выполнить код после завершения асинхронной операции?». Ответ прост — функции обратного вызова.
В JavaScript функции являются объектами высшего порядка. Это означает, что функции можно передавать в другие функции в виде параметров или возвращать в виде результата выполнения.
В первом случае мы вызываем функцию foo при помощи круглых скобок и выводим результат выполнения в консоль. Во втором примере мы не делаем вызов функции (обратите внимание на отсутствие круглых скобок), и в консоль выводится содержимое функции. Выходит, нам ничего не мешает передать функцию в виде параметра для других функций:
Что в итоге? Мы передали ссылку на функцию в виде параметра и вызвали её внутри другой функции. В этом и заключается идея колбэков: мы передаем в виде параметров функции, которые будут вызваны «когда-нибудь потом».
И снова пицца
Вернёмся к примеру с приготовлением пиццы. Попробуем поэкспериментировать с кодом и перевести его на асинхронные рельсы. Напомню, наша задача — попросить приготовить пиццу, и читать книгу, пока пицца не будет готова.
Это рабочий код, попробуйте выполнить его в консоли и посмотреть на результат вывода. Он будет таким:
Как видите, ничего сверхъестественного в колбэках нет. Это обычная функция, которая будет выполнена не сейчас, а когда-нибудь потом. «Когда-нибудь» — не преувеличение. Мы не можем сказать, в какой момент времени это случится, но можем сказать, после какой именно функции — после выполнения функции приготовлении пиццы.
Что такое callback-функция в JavaScript?
Jul 2, 2018 · 4 min read
Что такое коллбэк?
Простыми словами: коллбэк — это функция, которая должна быть выполнена после того, как другая функция завершила выполнение (отсюда и название: callback — функция обратного вызова).
Чуть сложнее: В JavaScript функции — это объекты. Поэтому функции могут принимать другие функции в качестве аргументов, а также функции могут возвращать функции в качестве результата. Функции, которые это умеют, называются функциями высшего порядка. А любая функция, которая передается как аргумент, называется callback-функцией. Чтобы лучше разобраться, давайте посмотрим на примерах, как это выглядит.
Зачем нам нужны коллбэки?
По одной п р остой причине — JavaScript это событийно-ориентированный язык. Это значит, что вместо того, чтобы ждать ответа для дальнейшего выполнения программы, JavaScript продолжит выполнение, одновременно ожидая других событий. Давайте разберем простой пример:
Как вы и ожидаете, функция first выполнится первой, а функция second после нее, и в консоли будет выведен следующий результат:
Зачем я вам это показал? Чтобы вы понимали, нельзя просто вызывать функции в нужном порядке и надеяться, что они в любом случае выполнятся в том же порядке. Коллбэки же позволяют нам быть уверенными в том, что определенный код не начнет исполнение до того момента, пока другой код не завершит исполнение.
Создаем callback
Хватит болтовни, теперь давайте создадим коллбэк.
Во-первых, откройте консоль разработчика в Google Chrome (Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J) и введите в консоли следующую функцию:
Теперь давайте добавим в определение функции еще один параметр, это и будет наш коллбэк. Затем вызовем ее, определив функцию-callback в качестве аргумента:
Если вы введете этот код в консоли, вы получите два алерта один за другим, в первом будет сообщение о том, что выполнение домашнего задания началось (Starting my math homework.), а во втором — что вы закончили выполнять задание (Finished my homework).
Однако коллбэки не обязательно быть определены при вызове функции. Они могут быть определены и в другом месте кода, например, так:
Таким образом, результат выполнения этого кода, такой же, как и в предыдущем примере, однако сам код немного другой. Как вы видите, мы передали функцию alertFinished как аргумент в функцию doHomework при ее вызове.
Пример из реальной жизни
На прошлой неделе я опубликовал статью «Создаем бота для Твиттера в 38 строк кода». Этот код работает благодаря API Твиттера. И когда мы делаем запрос к API, мы должны дождаться ответа до того, как начнем выполнять с этим ответом какие-то действия. Это прекрасный пример того, как в реальной жизни выглядит callback-функция. Вот как выглядит сам запрос:
T.get просто значит, что мы выполняем get запрос к API Твиттера. В запросе три параметра: ‘search/tweets’ – это адрес (роут) запроса, params – наши параметры поиска и в конце передается анонимная функция-callback.
Коллбэк здесь нужен, потому что нам нужно дождаться ответа от сервера до того, как приступим к дальнейшему выполнению кода. Мы не знаем, успешным будет наш запрос или нет, поэтому после отправки параметров поиска на search/tweets через get-запрос, мы просто ждем. Как только Твиттер ответит, выполнится наша callback-функция. Твиттер отправит нам в качестве ответа или объект err (error – ошибка), или объект response. В коллбэке мы можем через if() проверить, был ли запрос успешным или нет, и затем действовать соответственно.
Перевод: Артем Арбатский
От редактора: Мы на Хекслете часто публикуем переводы статей. Важно помнить:
Понятие callback-функций в JavaScript
Дата публикации: 2016-10-07
От автора: слово колбэк, один из сложнейших для понимания аспектов JavaScript, часто упоминается в контексте функций и событий. Что такое колбэки, и как они работают?
Вы, скорее всего, уже знакомы с колбэками. К примеру, они часто встречаются в обработчиках событий:
Такая callback-функция анонимна и является замыканием. На колбэки можно ссылаться через выражения функций или оберточные функции.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Зачем нужны callback-функции?
JavaScript – язык программирования, работающий с событиями: код выполняется в порядке возникновения событий, но результат вычисляется не обязательно по порядку в коде. То есть код:
Распечатает слово First в консоли после вычислений. Я замедлю эту функцию и создам вторую, которая будет выполняться сразу же:
Результат в консоли будет отличаться от ожидаемого:
Почему? В время выполнения JS находит функцию first() и исполняет ее. Затем без пауз он переходит на вторую функцию и запускает ее. JS никогда не останавливается и ищет, что ему еще выполнить. Вот почему в современных браузерах он так быстро работает.
Важно отметить, что колбэк – это всего лишь определенный способ объявления функций в JS. Явного типа callback-функций не существует. Колбэки появились в ES5 (предыдущий JS стандарт) и JQuery. На данный момент они считаются нормальной техникой программирования.
Улучшаем колбэк-функции
В случае с первым примером с обработчиком события, мы ждали, пока завершится событие click, и только потом исполняли оставшийся код. Однако если вы делаете что-то одно, намного лучше будет заменить колбэк на именованную функцию:
Результат будет тот же, но так код становится более абстрактным, а функцию makeMenu теперь можно повторно использовать в других частях скрипта. Возникает одна возможная проблема. Если в функцию добавить параметры, функция может срабатывать мгновенно и без события клика:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Результат в консоли без события клика:
Другими словами, JS запускает событие без какого-либо действия. Исправить это можно, вернувшись к формальной записи колбэк-функций:
Первый пример можно сократить с помощью функции-стрелки в ES6:
У вас может закрасться подозрение, что сцепка событий при помощи нескольких колбэк-функций может сильно усложнить код JS и запутать наследование. Вы правы. На сайте Callback Hell вы найдете парочку хороших советов по работе со сцепкой событий. В будущих статьях мы также будем уделять внимание этой проблеме.
Заключение
По существу, колбэк-функции представляют собой способ контролировать порядок выполнения кода в JS, способ добиться выполнения кода в логическом порядке. Такие функции часто называют асинхронным JS: функция передается в виде параметра и говорит «сделай это в будущем». Насколько в будущем или условия выполнения передаваемой функции описываются в колбэк-функции. В ES6 такой подход используют для промисов.
JS пронизан колбэк-функциями, которые являются неотъемлемой частью языка. window.requestAnimationFrame() – пример колбэк-функции, которая выполняется, как только браузера определяет, что он готов к отрисовке контента на экран, что обеспечивает плавность анимации.
Постоянная работа JS (всегда ждет события и мгновенно реагирует на все) также влияет на производительность, особенно в часто-запускаемых событиях типа прокрутки окна, изменения размера окна и при работе с некоторыми полями форм типа range. Я покажу эти примеры в статье, где мы будем искусственно занижать производительность браузера.
Событийный характер JS частично контролируется такими понятиями, как замыкания, область видимости и контекст, о которых я расскажу в отдельных статьях.
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
