Что такое callback функция

Что такое callback функция

Многие действия в JavaScript асинхронные.

Например, рассмотрим функцию loadScript(src) :

Эта функция загружает на страницу новый скрипт. Когда в тело документа добавится конструкция

Комментарии

  • Если вам кажется, что в статье что-то не так — вместо комментария напишите на GitHub.
  • Для одной строки кода используйте тег , для нескольких строк кода — тег

, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)

  • Если что-то непонятно в статье — пишите, что именно и с какого места.
  • Что такое коллбэк?

    Простыми словами: коллбэк — это функция, которая должна быть выполнена после того, как другая функция завершила выполнение (отсюда и название: callback – функция обратного вызова).

    Чуть сложнее: В JavaScript функции — это объекты. Поэтому функции могут принимать другие функции в качестве аргументов, а также функции могут возвращать функции в качестве результата. Функции, которые это умеют, называются функциями высшего порядка. А любая функция, которая передается как аргумент, называется callback-функцией. Чтобы лучше разобраться, давайте посмотрим на примерах, как это выглядит.

    Зачем нам нужны коллбэки?

    По одной простой причине: JavaScript — это событийно-ориентированный язык. Это значит, что вместо того, чтобы ждать ответа для дальнейшего выполнения программы, JavaScript продолжит выполнение, одновременно ожидая других событий. Давайте разберем простой пример:

    Как вы и ожидаете, функция first выполнится первой, а функция second после нее, и в консоли будет выведен следующий результат:

    Пока что все понятно. Но что если функция first содержит некий код, который не может выполниться немедленно? К примеру, запрос к API, где мы отправляем запрос и должны ждать ответа. Чтобы смоделировать такую ситуацию, мы используем функцию setTimeout , которая вызывает функцию после заданного временного промежутка. Мы отсрочим выполнение функции на 500 миллисекунд, как будто бы это запрос к некому API. Теперь код будет выглядеть так:

    Неважно, понимаете ли вы сейчас, как работает setTimeout() . Основная идея — теперь мы отложили исполнение команды console.log(1) на 500 миллисекунд. И что теперь выведет наша программа?

    Хотя мы по-прежнему вызываем функцию first первой, ее вывод появился вторым, после вывода функции second . Но JavaScript не нарушает порядок вызова функций, он просто не дожидается ответа от функции first , а сразу двигается дальше — к функции second .

    Читайте также:  Красивые имена для стима

    Зачем я вам это показал? Чтобы вы понимали, нельзя просто вызывать функции в нужном порядке и надеяться, что они в любом случае выполнятся в том же порядке. Коллбэки же позволяют нам быть уверенными в том, что определенный код не начнет исполнение до того момента, пока другой код не завершит исполнение.

    Создаем коллбэк

    Хватит болтовни, теперь давайте создадим коллбэк.

    Во-первых, откройте консоль разработчика в Google Chrome (Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J) и введите в консоли следующую функцию:

    Мы создали функцию doHomework . Наша функция принимает одну переменную — название предмета, которым мы будем заниматься. Вызовите функцию, набрав следующий текст в консоли:

    Теперь давайте добавим в определение функции еще один параметр, это и будет наш коллбэк. Затем вызовем ее, определив функцию-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() проверить, был ли запрос успешным или нет, и затем действовать соответственно.

    Читайте также:  Как отправить видео по почте в майле

    Перевод: Артем Арбатский

    От редактора: Мы на Хекслете часто публикуем переводы статей. Важно помнить:

    1. Мнение автора статьи может отличаться от мнения администрации и сотрудников Хекслета.
    2. Цель перевода – показать мнение. Поэтому одна статья может визуально противоречить другой: это просто разные мнения. Мы оставляем на вашу ответственность возможность анализировать и делать выводы для себя.

    Если вы не имеете большого опыта работы с 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

    Ссылка на основную публикацию
    Через какое время отключают сим карту мегафон
    Часто можно слышать, что некоторые люди вместо одной сим-карты предпочитают пользоваться двумя или сразу несколькими. Это объясняется лояльной политикой компании...
    Утилиты асус для ноутбука
    Драйверы и утилиты от производителя для ноутбуков и нетбуков ASUS под операционную систему Windows 10 / 8.1 / 8 /...
    Утилиты для виндовс 10 64 бит
    Скачать антивирус NOD32 на компьютер Windows 10 бесплатно на русском языке для защиты ноутбука или ПК от вирусов и потенциального...
    Через прямую l провести плоскость перпендикулярно данной
    Не будет преувеличением утверждать, что построение взаимно перпендикулярных прямых и плоскостей наряду с определением расстояния между двумя точками являются основными...
    Adblock detector