Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Рассказываем, что такое коллбэк-функция в JavaScript, зачем ее использовать и как вообще она устроена.

2 Это перевод статьи Брэндона Морелли<a>JavaScript: What the heck is a Callback?</a>

3 <blockquote>Вы читаете обновленную и улучшенную версию нашей старой статьи

4 </blockquote><h2>Содержание</h2>

5 <ul><li><a>Что такое коллбэк?</a></li>

6 <li><a>Зачем нужны коллбэки?</a></li>

7 <li><a>Создаем коллбэк</a></li>

8 <li><a>Пример из реальной жизни</a></li>

9 </ul><h2>Что такое коллбэк?</h2>

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

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

12 <h2>Зачем нужны коллбэки?</h2>

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

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

15 // 1 // 2

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

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

18 first(); second(); // 2 // 1

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

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

21 <h2>Создаем коллбэк</h2>

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

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

24 Теперь давайте добавим в определение функции еще один параметр, это и будет наш коллбэк. Затем вызовем ее, определив функцию-callback в качестве аргумента:

25 Если вы введете этот код в консоли, вы получите два алерта один за другим, в первом будет сообщение о том, что выполнение домашнего задания началось (Starting my math homework.), а во втором - что вы закончили выполнять задание (Finished my homework).

26 Однако коллбэки не обязательно должны быть определены при вызове функции. Они могут быть определены и в другом месте кода, например, так:

27 Таким образом, результат выполнения этого кода такой же, как и в предыдущем примере, однако сам код немного другой. Как вы видите, мы передали функцию alertFinished как аргумент в функцию doHomework при ее вызове.

28 Перепишем пример вызова функции с setTimeout для последовательного выполнения функций:

29 <h2>Пример из реальной жизни</h2>

30 На прошлой неделе я опубликовал статью<a>"Создаем бота для Твиттера в 38 строк кода"</a>. Этот код работает благодаря API Твиттера. И когда мы делаем запрос к API, мы должны дождаться ответа до того, как начнем выполнять с этим ответом какие-то действия. Это прекрасный пример того, как в реальной жизни выглядит коллбэк. Вот как выглядит сам запрос:

31 T.get просто значит, что мы выполняем get запрос к API Твиттера. В запросе три параметра: 'search/tweets' - это адрес (роут) запроса, params - наши параметры поиска и в конце передается анонимная функция-callback.

32 Коллбэк здесь нужен, потому что нам нужно дождаться ответа от сервера до того, как приступим к дальнейшему выполнению кода. Мы не знаем, успешным будет наш запрос или нет, поэтому после отправки параметров поиска на search/tweets через get-запрос, мы просто ждем. Как только Твиттер ответит, выполнится наша callback-функция. Твиттер отправит нам в качестве ответа или объект err (error - ошибка), или объект response. В коллбэке мы можем через if() проверить, был ли запрос успешным или нет, и затем действовать соответственно.