Зачем нужны callback функции?

Question

[Stanislav]

Чем:

var allUserData = [];


function logStuff(userData) { 
    if (typeof userData === 'string') { 
        console.log(userData); 
    } else if (typeof userData === 'object') { 
        for (var item in userData) { 
            console.log(item + ': ' + userData[item]); 
        }
    }
}

function getInput(options) { 
    allUserData.push(options);
    logStuff(options);
}

getInput({ name: 'Rich', speciality: 'JavaScript' });

Отличается от:

var allUserData = [];

function logStuff(userData) { 
    if (typeof userData === 'string') { 
        console.log(userData); 
    } else if (typeof userData === ‘object’) { 
        for (var item in userData) { 
            console.log(item + ‘: ‘ + userData[item]); 
        }
    }
}

function getInput(options, callback) { 
    allUserData.push(options);
    callback(options);
}

getInput({ name: 'Rich', speciality: 'JavaScript' }, logStuff);

И собственно зачем этот callback нужен вообще, если без него пишется кода меньше? Я только вникаю, так что тапками не закидывайте ;(

Answer 1

[Даниил Игоревич]

Тем, что ты можешь много разных getInput использовать и при этом использовать разные функции для обработки, указанные вторым аргументом. А, используя первый вариант, одна функция logstuff привязана функции к getInput, и если что-то понадобится изменить, то функцию getInput придётся адаптировать под изменившиеся условия.

Comments

[Stanislav]

Допустим у меня есть функций без параметров, она генерирует 1000 рандомных чисел и выводит их, как innerHTML в элемент . Естественно при выполнении этой функции браузер фризится на 2-3 секунды. Как можно сделать так, чтобы пока эти рандомные числа считались - браузер не вис? Просто пишут, что с помощью callback можно реализовать асинхронность, но примеры показывают из node.js и ajax, а я пока только js изучаю.

[Даниил Игоревич]

Stasgar: асинхронность в js - setInterval и setTimeout

[TitNIk]

Даниил Игоревич, не совсем. setInterval и setTimeout выполняются после основного потока.

Answer 2

[Алексей]

В данном случае - разницы никакой.
Если нужно будет устанавливать разные обработчики для данных - появится преимущество.
То есть если будут вызовы:

getInput({ name: 'Rich', speciality: 'JavaScript' }, logStuff);
getInput({ name: 'Rich', speciality: 'JavaScript' }, logOther);
getInput({ name: 'Rich', speciality: 'JavaScript' }, logToDisk);

Имхо в данном случае это не совсем callback, это просто передача функции обработки как аргумента.
Callback, это когда вы вызываете какой-то метод, который когда-нибудь (через несколько секунд например) должен вызывать вашу функцию с результатом.

Comments

[Stanislav]

Т.е. грубо говоря добавлять функцию, но без непосредственного ее объявления в конструкторе? Понятно. А что в интернете говорят про имитацию потоков. js - однопоточный язык, команды выполняются друг за другом, как эта конструкция с callback может делать что-то в фоне?

[Алексей]

В данном примере я не вижу никакой многопоточности.
Оба примера совершенно одинаковы, просто по разному вызывается функция.

[Stanislav]

А как реализовывается "второй поток"? Не могу понять как callback функция может что-то ждать.

[Maxim Yakupov]

Stasgar: например, в ajax запросе коллбэк вызывается после того, как пришли данные

[Stanislav]

Maxim Yakupov: а каким образом не тормозит? Отправил запрос - фриз, потом фриз проходит и callback выполняется, я не прав?

[Maxim Yakupov]

Stasgar: мне кажется, там внутри по таймеру каждые несколько тиков вызываются проверки, и когда ответ пришел - вызывается onload

[Алексей]

Stasgar: В вашем примере нет никаких ajax запросов, по-этому тут тормозить нечему.
Вот когда сделаете ajax запрос, тогда и увидите там настоящую callback функцию, которая будет вызвана по его завершению.

[Stanislav]

Maxim Yakupov: разве для этого не достаточно timeout юзать?

[Stanislav]

Алексей: получается просто по таймауту проверяем и если проверилось, то выполняем callback?

[Stanislav]

Алексей: Я уже не про пример, я про концепцию.

[Maxim Yakupov]

Stasgar: я предположил, что твориться конкретно в кишках браузера при обработке именно аякс-запроса. setTimeout несколько из другой степи. Вообще, должно быть так, что в браузере в одном потоке js-движок, и в отдельном работа с сетью, и эти потоки как-то общаются между собой, скорее всего через систему обработки событий, а значит, вопрос про коллбэки плавно перетекает в вопрос об устройстве системы обработки событий в браузере. Но это не точно, сам новичок в js :)

[Maxim Yakupov]

Да, все-таки нужно копать в сторону системы обработки событий. https://habrahabr.ru/post/138062/

[Алексей]

Stasgar: Я, если честно, запутался уже в этом "топике" :)
Callback и есть callback - дословно "обратный вызов".
Вы запускаете какой-то процесс, который по окончанию выполнит вашу функцию.
По таймеру ничего не нужно проверять - длительный процесс сам ее должен вызвать.

[Stanislav]

Алексей: ну я понял концепт, тема актуальность потеряла. Было интересно почитать на простом языке, почти в каждом туториале используют для примера ajax, который я пока не изучал, а узнать про это интересно, теперь все встало на свои места.

Answer 3

[Maxim Yakupov]

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

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