Как работают колбэки в js?

Question

[be9st]

Почему слова "асинхронность" и "колбэки" связаны? Это же просто передача функции в функцию. Можете объяснить ПОНЯТНО, как и почему достигается асинхронность за счёт колбэков, желательно с примером (без setTimeout)

Comments

[Kovalsky]

https://learn.javascript.ru/events-and-timing-depth

Answer 1

[Сергей Соколов]

Как вы уже поняли и верно заметили, коллбэк это функция, которую передали куда-то и вызовут, когда надо будет.

Асинхронность достигается не за счёт коллбэков. Их просто удобно использовать там, где есть асинхронность. Хотя ещё удобнее промисы.

Асинхронность возникает там, где рвётся последовательный (строчка за строчкой) порядок выполнения кода. Где один код уже отыграл и отпустил движок JS – пусть остынет, нет пока больше дел. А остались навешанные слушатели событий, таймеры, нерешённые промисы, долгоиграющие ajax-запросы и прочая асинхрота.

В эти слушатели, таймауты и прочие и передают в коллбэке те строки кода, которые надо будет выполнить «потом».

Пример. Не хотите setTimeout, тогда с кнопкой пробела:

function superCallback() {
  console.log("Свершилось! Коллбэк сработал.");
}

document.addEventListener("keydown", superCallback);
// на этот момент мы объявили функцию и повесили слушатель события
// дальше всё, делать больше нечего, движок JS свободен
// но слушатель сидит, ждёт.

Наступает ночь асинхронность. Никакой код сейчас не работает. Но заряжен слушатель с коллбэком.

Теперь, если выждав паузу, нажать какую-нибудь клавишу, сработает слушатель и проиграет вслух код в коллбэке.

Comments

[be9st]

Как я понял:

function foo(args){
 //Тут какой-то синхронный код
  return result
}
function bar(callback, value){
//Тут тоже синхронный код
let result = callback(value)
return result
}

//Асинхронный код
let asynResult = Bar(foo, params)

Вызов bar будет асинхронным, так как сначала выполнится синхронный код, затем в очередь закинется колбэк, а потом он тоже выполнится и уже когда foo выполнится, то он вернёт значение. Или этот код всё же будет синхронным?

[Сергей Соколов]

be9st, тут нет разрыва, все выполняется синхронно, сразу.

Answer 2

[Арсений Матыцин]

В нормальном построенном коде callback выполняется либо по факту условия выполнения функции (не обязательно асинхронной).

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

Не знаю даж, может быть есть проще объяснение, я старался как мог)

Comments

[be9st]

А можно пример, с колбэком, когда код будет асинхронным?

[Арсений Матыцин]

be9st, да хотя бы fetch, как по мне очень наглядно.

.then((data) => {} вот это стрелочная функция, если что.

Answer 3

[Rsa97]

Callback - это именно передача функции в функцию. Переданный callback будет вызван при выполнении каких-либо условий.
Пример синхронного callback'а - функции map, forEach, reduce и т.п., которые вызывают callback для каждого элемента переданного массива и ждут пока им вернётся ответ.
Пример асинхронного callback'а - setTimer, setInterval, fetch. В этом случае callback ставится в очередь на выполнение ядром JS при выполнении определённого условия - наступлении заданного времени или приходе ответа от сервера. Основная функция к тому моменту уже завершила свою работу.

Comments

[be9st]

А почему одни колбэки становятся в очередь, а другие нет?

[Rsa97]

be9st, В очередь callback может поставить только ядро. Те callback'и, которые вызываются напрямую из пользовательской функции, срабатывают сразу и функция дожидается их завершения. Те, которые передаются во встроенные функции с отложенным срабатыванием по событию - ставятся ядром по этому событию в очередь исполнения.
Основная причина в том, что пользовательская часть JS работает строго в один поток. Если функция будет ждать, пока придёт ответ от fetch, то выполнение всего остального кода будет приостановлено до ответа. Поэтому функция передаёт ядру callback-функцию, ядро сообщает, что запрос отправлен и основная функция продолжает работать. Когда ответ на fetch пришёл, ядро добавляет вызов callback'а в очередь исполнения и он будет выполнен, как только закончат выполнение все ранее добавленные в очередь вызовы функций.
Также в эту очередь добавляются callback'и, повешенные на события интерфейса - нажатия кнопок, движения мыши, скролл и т.п.