Понимание асинхронных обратных вызовов JavaScript через домашние хозяйства

Автор оригинала: FreeCodeCamp Community Member.

Стивена Mayeux.

Если вы когда-либо делали прачечную, вы можете понять, как работают обратные вызовы.

На днях я читаю Кевин Кононенко блестяще смешное и простой для понимания руководства по MVC Frameworks. Он объясняет Парадигма моделей-контроллеров-контроллеров через заказа напитки в баре И это было одно из моих любимых объяснений программирования, которые я думаю!

Я действительно ценил это, потому что он был написан без воздуха претензии или элитарности, и это заставило меня удивляться, почему многие другие опытные кодера не могут помочь новичкам без l337er – ты отношение?

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

Эта методология преподавания под влиянием британских лингвистов в 1980-х годах, что сегодня сообщило современной педагогии иностранных языков. Может быть, то же самое происходит прямо сейчас для кодирования образования!

Кевин будет задействовать, но я хотел бы объяснить, насколько асинхронные обратные вызовы работают в JavaScript через контекст выполнения обычных домохозяйств.

Синхронный медовый список

Крича к моей жене, которая удваивала свою долю на дому дома, пока я научусь в коде. Я должен ее большое время!

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

1. Стирать
2. Давать собаку
3. Сортировать переработку
4. Баланс бюджета
5. Выясните, что мы делаем на ужин.

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

function syncChores() {  console.log('Do the laundry');  console.log('wash the dog');  console.log('sort the recycling');}

syncChores();

/* Output appears in the same order it was written:

   Do the laundry   wash the dog   sort the recycling

*/

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

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

Вот что похоже с псевдокодом:

function doLaundry() {  startWashCycle();  switchToDryer();  foldAndIronClothes();}

function washDog() {  // imagine some dog-washing code here}

function sortRecycling() {  // and imagine some sorting code here}

doLaundry();// Now wait a full 80 minutes before completing other functions

// Now I can finally wash my dog!washDog();sortRecycling();

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

Это действие возвращения к стирке, когда он готов, аналогичен JavaScript Функция обратного вызова И наши стиральные машины вполне буквально называют нас с какой-нибудь будильником или зуммером! Это позволяет нам продолжать и делать другие домашние дела, а затем продолжить белье, когда он готов к нам.

Асинхронный медовый список

Давайте снова сделаем дела, на этот раз асинхронно. Что бы выглядеть в псевдокоде?

function doLaundry(callback) {  // imagine initial code that kicks off wash cycle  // takes 80 minutes to complete wash cycle

  callback(err, cleanLaundry);}

doLaundry(function(err, cleanLaundry) {  // sometimes our washing machines break down  // better handle that possible error

  if (err) throw err;

  // if no errors, switch to dryer after wash is complete

  // Tada! Our call back alerting us that washing is complete!

  switchToDryer(cleanLaundry);

});

// as we wait, JavaScript will run this stuff now!

washDog();

// still time for more chores!

sortRecycling();

// the following will be undefined because it is not yet ready

console.log(cleanLaundry);

// Now the laundry is ready! // Let's go back and switch clothes to the dryer

// The clothes are drying. Let's continue doing more chores.// Tanya will be impressed with my productivity!

balanceBudget();

Как и статья Кевина, это было только предназначено только для того, чтобы очистить концепцию обратных вызовов. Если вы хотите более практичное руководство, проверить Обратный вызов Ад Отказ

Твоя очередь

Это помогает, если вы можете применить абстрактные концепции на реальные ситуации. Можете ли вы подумать о том, что вы делаете дома, школу или работа, которая напоминает синхронный и асинхронный код? Напишите их в комментариях ниже!