Что такое callback-функция в JavaScript?
Что такое коллбэк?
Простыми словами: коллбэк — это функция, которая должна быть выполнена после того, как другая функция завершила выполнение (отсюда и название: callback – функция обратного вызова).
Чуть сложнее: В JavaScript функции — это объекты. Поэтому функции могут принимать другие функции в качестве аргументов, а также функции могут возвращать функции в качестве результата. Функции, которые это умеют, называются функциями высшего порядка. А любая функция, которая передается как аргумент, называется callback-функцией. Чтобы лучше разобраться, давайте посмотрим на примерах, как это выглядит.
Зачем нам нужны коллбэки?
По одной простой причине: JavaScript — это событийно-ориентированный язык. Это значит, что вместо того, чтобы ждать ответа для дальнейшего выполнения программы, JavaScript продолжит выполнение, одновременно ожидая других событий. Давайте разберем простой пример:
Как вы и ожидаете, функция first выполнится первой, а функция second после нее, и в консоли будет выведен следующий результат:
Зачем я вам это показал? Чтобы вы понимали, нельзя просто вызывать функции в нужном порядке и надеяться, что они в любом случае выполнятся в том же порядке. Коллбэки же позволяют нам быть уверенными в том, что определенный код не начнет исполнение до того момента, пока другой код не завершит исполнение.
Создаем коллбэк
Хватит болтовни, теперь давайте создадим коллбэк.
Во-первых, откройте консоль разработчика в Google Chrome (Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J) и введите в консоли следующую функцию:
Теперь давайте добавим в определение функции еще один параметр, это и будет наш коллбэк. Затем вызовем ее, определив функцию-callback в качестве аргумента:
Если вы введете этот код в консоли, вы получите два алерта один за другим, в первом будет сообщение о том, что выполнение домашнего задания началось (Starting my math homework.), а во втором — что вы закончили выполнять задание (Finished my homework).
Однако коллбэки не обязательно должны быть определены при вызове функции. Они могут быть определены и в другом месте кода, например, так:
Таким образом, результат выполнения этого кода такой же, как и в предыдущем примере, однако сам код немного другой. Как вы видите, мы передали функцию alertFinished как аргумент в функцию doHomework при ее вызове.
Пример из реальной жизни
На прошлой неделе я опубликовал статью «Создаем бота для Твиттера в 38 строк кода». Этот код работает благодаря API Твиттера. И когда мы делаем запрос к API, мы должны дождаться ответа до того, как начнем выполнять с этим ответом какие-то действия. Это прекрасный пример того, как в реальной жизни выглядит коллбэк. Вот как выглядит сам запрос:
T.get просто значит, что мы выполняем get запрос к API Твиттера. В запросе три параметра: ‘search/tweets’ – это адрес (роут) запроса, params – наши параметры поиска и в конце передается анонимная функция-callback.
Коллбэк здесь нужен, потому что нам нужно дождаться ответа от сервера до того, как приступим к дальнейшему выполнению кода. Мы не знаем, успешным будет наш запрос или нет, поэтому после отправки параметров поиска на search/tweets через get-запрос, мы просто ждем. Как только Твиттер ответит, выполнится наша callback-функция. Твиттер отправит нам в качестве ответа или объект err (error – ошибка), или объект response. В коллбэке мы можем через if() проверить, был ли запрос успешным или нет, и затем действовать соответственно.
Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Времена, когда виджет обратного звонка использовался только на специализированных ресурсах, давно прошли – теперь его можно встретить на любом сайте, независимо от специфики. Зачем нужна кнопка Callback, как ее настроить и повысить эффективность? Об этом читайте в нашей статье.
Обратный звонок(колл бэк) – это простой сервис, актуальный как для небольших, так и для крупных динамично развивающихся компаний. Благодаря ему, клиенты приобретают возможность получения бесплатной и главное, быстрой консультации. Кроме того, кнопка обратного звонка обладает такими преимуществами:
— Связь 24/7. Звонки от посетителей сайта обрабатываются без перерывов и выходных. В отсутствие сотрудника на рабочем месте, заказы таких звонков переадресовываются на его электронную почту;
— Рост уровня лояльности клиентов. Виджет «Заказать обратный звонок», расположенный на видном месте сайта, подчеркивает открытую позицию компании. Кроме того, посредством экономии времени, затрачиваемого на поиск необходимой информации, и средств на оплату звонка, он способствует удобству посетителя;
— Повышение конверсии ресурса. Как и другие средства связи, callback – это полноценный канал общения, который превращает обычного посетителя в потенциального, а после и в реального клиента компании.
Правильная настройка – гарантия успеха
Основная задача сервиса – стимуляция пользователя к осуществлению целевого действия. И по статистике, кнопка обратного звонка Callback увеличивает отклик клиентов более чем на 10%. Конечно, при условии грамотной настройки, которая предусматривает:
— Отсутствие навязчивости. С момента входа посетителя на сайт до предложения с заказом обратного звонка должно пройти не меньше минуты, при этом в течение пользовательской сессии всплывающее окно должно появиться не более одного раза;
— Правильное расположение. Окно виджета не должно закрывать важную информацию на экране, а кнопка отказа от звонка должна оставаться яркой и доступной клиенту;
— Оптимизация времени ответа. Время реакции на запрос колбека должно быть минимальным – в пределах 30 секунд;
— Органичный дизайн и удобное размещение. Кнопка виджета должна не только соответствовать общему стилю сайта, но и дополнять его. При выборе места расположения кнопки стоит учитывать, что наиболее заметным для пользователя является верхний левый угол экрана, а наименее – нижний правый.
Однако, не стоит забывать, что виджет callback для сайта – это технология. Реальные продажи зависят непосредственно от техники продаж, качества обслуживания и конечно, функциональности сервиса. К примеру, подключая обратный звонок с АТС «Телфин.Офис», компания получает не только доступ к настройке кнопки, но и к дополнительным возможностям – к статистике, журналу звонков, голосовой почте, записи разговоров и пр.
Понимание callback-функций (колбеков)
Функции — это объекты
Чтобы понимать callback-функции, нужно понимать обычные функции. Это может показаться банальностью, но функции в Javascript’е — немного странные штуки.
Преимущество концепции «функция-как-объект» заключается в том, что код можно передавать в другую функцию точно так же, как обычную переменную или объект (потому что в буквальном понимании код — всего лишь объект).
Передача функции как callback-функции
Передавать функцию в качестве аргумента просто.
Может показаться глупостью создавать такой перемудрённый код, когда можно вернуть значение нормальным способом, но существуют ситуации, в которых это непрактично и callback-функции необходимы.
Не загромождайте выход
Традиционно функции в ходе выполнения принимают на вход аргументы и возвращают значение, используя выражение return (в идеальном случае единственное выражение return в конце функции: одна точка входа и одна точка выхода). Это имеет смысл. Функции — это, в сущности, маршруты между вводом и выводом.
Javascript даёт возможность делать всё немного по-другому. Вместо того чтобы дожидаться, пока функция закончит выполняться и вернёт значение, мы можем использовать callback-функции, чтобы получить его асинхронно. Это полезно для случаев, когда требуется много времени для завершения, например, при AJAX-запросах, ведь мы не можем приостановить браузер. Мы можем продолжить заниматься другими делами в ожидании вызова колбека. Фактически, очень часто от нас требуется (или, точнее, нам настоятельно рекомендуется) делать всё асинхронно в Javascript’е.
Вот более детальный пример, в котором используется AJAX для загрузки XML-файла и используется функция call() для вызова callback-функции в контексте запрошенного объекта (это значит, что когда мы укажем ключевое слово this внутри callback-функции, оно будет ссылаться на запрошенный объект):
В этом примере мы создаём объект httpRequest и загружаем файл XML. Типичная парадигма возвращения значения в конце функции тут больше не работает. Наш запрос обрабатывается асинхронно, а это означает, что мы начинаем запрос и говорим ему вызвать нашу функцию, как только он закончится.
Мы используем здесь две анонимных функции. Важно помнить, что нам бы не составило труда использовать и именованные функции, но во имя лаконичности мы сделали их вложенными. Первая анонимная функция выполняется всякий раз при изменении статуса в нашем объекте httpRequest. Мы игнорируем это до тех пор, пока состояние не будет равно 4 (т.е. запрос выполнен) и статус будет равен 200 (т.е. запрос выполнен успешно). В реальном мире вам бы захотелось проверить, не провален ли запрос, но мы предполагаем, что файл существует и может быть загружен браузером. Эта анонимная функция связана с httpRequest.onreadystatechange, так что она выполняется не сразу, а вызывается каждый раз при изменении состояния в нашем запросе.
Коллбэк в JavaScript… Что за зверь?
Если вы не очень хорошо представляете себе — что такое «коллбэки», и как ими пользоваться в JavaScript, сейчас у вас есть шанс их понять и научиться с ними работать.
Перейдём сразу к делу. Коллбэк — это функция, которая должна быть выполнена после того, как другая функция завершит работу. Отсюда и название, которое, в английском написании, может быть представлено как «call back», хотя обычно это — «callback». Среди вариантов перевода этого слова — «обратный вызов». В русскоязычных публикациях, допускающих использование жаргона программистов, весьма распространена калька с оригинального названия: «коллбэк». Если же обойтись без жаргона, то о чём мы говорим, называется «функция обратного вызова».
Углубившись, для объяснения сущности функций обратного вызова, в особенности JavaScript, можно сказать, что функции в JS — это объекты. Поэтому функции могут принимать другие функции в качестве аргументов и возвращать их в качестве результатов. Функции, которые работают подобным образом, называют функциями высшего порядка. Коллбэками же обычно называют функции, передаваемые другим функциям в качестве аргументов.
Зачем нужны функции обратного вызова?
Коллбэки нужны по одной очень важной причине: JavaScript — это язык, в котором огромную роль играют события. Это означает, что вместо того, чтобы ожидать, скажем, результата выполнения некоей функции, остановив при этом все остальные операции, JavaScript-программа работает, наблюдая за событиями и реагируя на них.
Взглянем на простой пример:
Как можно ожидать, функция first() выполняется первой, а функция second() — второй. Запуск этого кода приводит к тому, что в консоль будет выведено следующее:
Вот что получилось теперь:
Для наших целей особенности работы setTimeout() сейчас неважны. Главное — обратите внимание на то, что вызов console.log(1) будет выполнен с задержкой.
Вот что произойдёт при запуске этого кода:
В ситуациях, когда, вызвав некую функцию, нельзя быть уверенным в том, что программа продолжит работу только получив ответ от неё, использование функций обратного вызова — это подход, позволяющий гарантировать то, что некий фрагмент кода будет вызван только после того, как какой-то другой код завершит выполнение. Например, такое постоянно происходит в любой программе, которая так или иначе взаимодействует с внешним миром — скажем, с веб-сервисами.
Создаём функцию обратного вызова
Создадим собственную функцию обратного вызова.
Для начала — откройте консоль разработчика Chrome ( Ctrl + Shift + J в Windows, или Cmd + Option + J в Mac) и введите следующее:
Вызовем обновлённую функцию следующими образом:
Функции обратного вызова совсем необязательно создавать непосредственно при вызове функций, которым они передаются. Такую функцию можно объявить и где-нибудь в коде:
После вызова функции doHomework() всё будет выглядеть точно так же, как в предыдущем примере. Различия заключаются лишь в том, как мы работаем с функцией обратного вызова.
Функции обратного вызова в реальных проектах
Для программного взаимодействия с популярной социальной сетью Twitter используется специальное API. Выполняя обращения к этому API, мы вынуждены ждать ответа, и только после его получения можем выполнять с тем, что придёт от Twitter, какие-то действия. Вот материал, где рассмотрена работа с Twitter API в среде Node.js с использованием NPM-пакета twitter.
Рассмотрим фрагмент кода из этого материала. Полагаем, он является отличной демонстрацией практического применения функций обратного вызова.
Итоги
Надеемся, наш рассказ о функциях обратного вызова в JavaScript оказался полезен тем, кто не очень хорошо в них разбирался. На самом деле, то, о чём мы здесь говорили — это лишь вершина айсберга. Однако теперь, поняв основы, вы можете расширять и углублять свои знания в этой области.
Уважаемые читатели! Если вы из тех, кто, до чтения этого материала, плохо представлял себе, что такое функции обратного вызова в JS, скажите — стало понятнее? А если коллбэки для вас — обычное дело, просим поделиться опытом с новичками.
Что такое callback
Возьмем стандартную ситуацию: у компании есть сайт, который находится на первых позициях в Google и Яндекс. Ежедневно его посещают минимум 300 пользователей. Но в сутки компания получает 1-2 звонка. Как быстро увеличить количество обращений в такой ситуации?
Callback (виджет заказа обратного звонка) — способ «выжать» максимум пользы из существующего трафика без дополнительных вложений в рекламный бюджет. Смотрим на практике, как работает технология, и какие преимущества она дает.
Что такое callback или обратный звонок для сайта
Форма заказа обратного звонка показывается в двух случаях:
При этих условиях появляется виджет, который предлагает клиенту заказать обратный звонок с сайта:
Как работает callback
У разных сервисов, которые предоставляют услугу callback, функции отличаются, но общий принцип работы схож. На примере Ringostat мы проиллюстрируем, как работает форма заказа обратного звонка с сайта:
Callback: преимущества для посетителя сайта
Для бизнеса виджет обратного звонка хорош тем, что позволяет конвертировать больший процент трафика в реальных клиентов. Это объясняется тем, что форма обратного звонка дополнительно мотивирует клиента на диалог с компанией. Тем более, что за обратный звонок с сайта он ничего не платит. При этом не нужно ничего менять в процессе привлечения клиентов и вливать дополнительные средства в рекламный бюджет.
Преимущества callback для компаний
Преимущества Callback Ringostat
Каким должен быть правильный обратный звонок для сайта:
Многие владельцы сайтов злоупотребляют pop up окнами, поэтому бытует мнение, что любые всплывающие формы раздражают посетителей. Это не так, они отлично работают, но главное не переборщить. Согласно исследованию AppSumo, выше всего конверсия у pop up окон, которые появляются на пятой секунде просмотра страницы.
В Ringostat можно настроить временной промежуток, спустя который форма callback будет автоматически показываться посетителю. Можно задать время, в течение которого виджет предложит связаться с клиентом. Также можно изменить текст формы callback. Для этого достаточно обратиться в техподдержку. По умолчанию, виджет появляется спустя 80 секунд, проведенных на сайте.
Виджет callback собирает статистику о звонках. В отчетах виджета содержится информация о том, с какого рекламного канала пользователь попал на сайт и заказал звонок. Учитывается источник перехода, кампания и ключевое слово.
Это важная информация. Ведь через форму заказа обратного звонка обычно обращаются заинтересованные клиенты. Вот как выглядит график по звонкам из callback в интерфейсе Ringostat:
Виджет становится частью вашего сайта. Так у клиентов Ringostat есть возможность менять цвет, размер и расположение формы на странице.
Также пользователям доступно 15 стилей виджета в различных оттенках и конфигурациях. Благодаря этому он гармонично впишется в дизайн сайта.
Пример шаблона Modern в синей цветовой гамме
С помощью гибких настроек виджета можно внедрить нестандартное решение. Например, при заполнении клиентом формы на сайте будет происходить автоматический дозвон вашему менеджеру по продажам. Вот пример того, как была реализована такая опция у клиента Ringostat.
