Это перевод статьи Стивена Майю «Understanding Asynchronous JavaScript Callbacks Through Household Chores»

Если вы когда-нибудь стирали, то легко поймёте, как работают обратные вызовы (callback).

На днях я прочитал блестящую, весёлую и лёгкую для понимания статью Кевина Кононенко про MVC-фреймворки, где он объясняет парадигму Модель-Представление-Контроллер (MVC) через заказ напитков в баре. Это было одно из лучших объяснений в программировании.

Я оценил эту статью, так как она написана без налёта снобизма. Это заставило задуматься, почему многие опытные программисты не могут помочь новичкам без высокомерного отношения?.

Я преподаю английский язык в Северной Корее и думаю, что учителям следует постоянно рассуждать как Кевин. Сейчас не одобряется подход, когда сухо объясняется теория и грамматика иностранного языка без контекста, поэтому хорошие учителя стараются преподавать иностранный язык с помощью историй, фильмов, музыки и картинок.

Эта методология преподавания развивалась под влиянием британских лингвистов в 80-е годы. На ней основывается методика преподавания современного иностранного языка. Сейчас она становится актуальной и для обучения языкам программирования.

Мне далеко до Кевина, он объясняет настолько прекрасно, что этот уровень недосягаем. Но я всё равно попробую на примере обычных домашних дел показать, как работают асинхронные функции обратного вызова в JavaScript.

Синхронный список дел для любимого

Скажем спасибо моей жене, которая выполняла двойную работу по дому, пока я работал и писал код. Теперь я должен ей много времени.

Обычно я помогаю по дому в воскресенье, и список дел выглядит так:

  1. Постирай бельё.
  2. Искупай собаку.
  3. Отсортируй мусор.
  4. Сбалансируй бюджет.
  5. Подумай, что приготовить на ужин.

Техническая сторона: по сути, JavaScript — это синхронный язык программирования, то есть он работает с одной строкой кода одновременно. Он не может перейти к следующей строке кода, пока не будет выполнена текущая строка. Рассмотрим пример:

А теперь представьте, как бы я выполнял свою работу синхронно в реальной жизни. Что произойдёт? Как это будет выглядеть?

Если вы вернётесь к моему списку, то увидите, что стирка — это первый пункт. Обычно она занимает около 35 минут в обычном режиме и ещё 45 минут ожидания, пока всё высушится. Целых 80 минут я бы просто сидел, не занимаясь ничем другим, так как жду пока закончится стирка.

Вот как это выглядит в псевдокоде:

Не очень продуктивно, правда? В реальной жизни взрослые люди слишком заняты, чтобы так тратить время, поэтому они будут заниматься всеми делами асинхронно. Они запустят стирку и продолжат делать другие задачи из списка, вернувшись к ней только по окончании цикла стирки.

Этот возврат к стирке после её завершения, аналогичен функциям обратного вызова (callback function) в JavaScript, и наша стиральная машина, в буквальном смысле, вызывает нас назад звонком или гудком. Это позволяет заняться другими домашними делами, а затем закончить стирку, когда машинка завершит работу.

Асинхронный список дел для любимого

Давайте снова попробуем выполнить наши дела, но теперь сделаем это асинхронно. Вот как это выглядит в псевдокоде:

Как и статья Кевина, эта статья только проясняет понятие обратных вызовов. Если вы хотите практическое руководство, то прочтите «Ад обратных вызовов».

Ваша очередь

Будет проще разобраться, если вы начнёте переносить абстрактные концепции на реальные ситуации. Возможно, вы делаете что-то напоминающее синхронный и асинхронный код дома, в школе или на работе? Напишите об этом в комментариях.