4

Объясните пожалуйста, что такое callback-функция и для чего она используется? Как я понимаю, это функция, которая передается в параметр другой функции, пример:

function blabla (a, b, callback) {
    let s = a + b;
    return s;
}
function sum () {
    console.log('blalba');
}

blabla (1, 2, sum);

sum(x, y) - Это и есть callback?

Cerej
  • 97
  • Да, это функция, которая передаётся в качестве аргумента в другую функцию. Часто используется для асинхронных вызовов или работы с бд (например с монгой), таких как ajax, тогда можно выполнить эту функцию после успешного действия и обработать результат выполнения такой функции, например впихнуть ответ сервера во всплывашку на сайте или вывести данные пользователя из базы данных. Таким образом можно заранее написать функцию, которая обрабатывает результаты, которые будут в будущем, после асинхронного вызова. Кейсов применения много. – larrymacbarry May 16 '17 at 14:49
  • 1
    у тебя пример очень кривой получился. у тебя sum вызывается сразу, а не как calback, а в функции blabla, соответственно, он не определен. – Алексей Шиманский May 16 '17 at 14:52
  • 1
    @Алексей Шиманский что-то не пойму, где sum сразу вызывается? не могли бы показать? Все я понял) callback() сразу вызывается – Cerej May 16 '17 at 14:56
  • исправил пример, теперь работает. В данном примере у меня правильная смысловая нагрузка на термин callback? – Cerej May 16 '17 at 14:58
  • 1
    Нет. опять не то.... опять у тебя функция sum вызывается сразу, а не передается как параметр..... должно быть отдалёёёёёённо что-то такое: https://jsfiddle.net/e8s7bkau/ – Алексей Шиманский May 16 '17 at 15:03
  • исправил) правильно теперь? – Cerej May 16 '17 at 15:12
  • @Cerej где-то в blabla нужен вызов callback(). А иначе, зачем это все? –  May 16 '17 at 15:16
  • @Cerej, нет и теперь не правильно, должно было быть let s = callback(a, b); – Grundy May 16 '17 at 15:16
  • @Grundy напиши лучше ответ с примерами) – Алексей Шиманский May 16 '17 at 16:25
  • У тебя коллбек функция не вызывается никак. http://joxi.ru/1A5Jy05fnQvJyr – wokalek May 17 '17 at 10:15
  • Вот таким образом обычно их используют: http://joxi.ru/KAgJkDZf49j712 – wokalek May 17 '17 at 10:16

1 Answers1

6

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

Во-первых, функции обратного вызова могут использоваться для настройки обобщенных алгоритмов. Рассмотрим, например, метод filter у массива. Этот метод создает новый массив, состоящий из элементов исходного, удовлетворяющих какому-то условию. Функция обратного вызова тут задает это самое условие.

Этот метод обычно реализуется браузером, но если бы его не было - то нечто подобное можно было бы реализовать вот так (более точную реализацию можно увидеть по ссылке выше):

Array.prototype.filter = function(callback) 
{
    var result = [];
    for (var i=0, len = this.length; i < len; i++)
    {
        if (callback(this[i]))
        {
            result.push(this[i]);
        }
    }
    return result;
}

Использование:

var x = [1,2,3,7,8,9];
var y = x.filter(t => t%2 == 0); // фильтруем чётные
console.log(y); // [2,8]

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

function loadData(callback) {
    fetch("/some/api/url", function (response) {
        response.json().then(callback);
    })
}

loadData(d => console.log(d));

Здесь используется функция fetch для выполнения ajax-запроса к некоторому API. Кстати, эта функция сама по себе тоже асинхронная, поэтому в примере вы видите две разных callback-функции: одна внутри loadData, вторая - снаружи.

Поскольку запрос к серверу выполняется относительно долго- не существует другого способа получить его результат кроме как передав callback для его обработки. Поэтому довольно часто один callback вызывает другой, а тот - третий. Неограниченное разрастание колбеков в коде называют callback hell.

Более подробно про асинхронность я отвечал тут:

Как вернуть значение из события или из функции обратного вызова?

В-третьих, callback может использоваться для уведомления о событии. Сюда относятся, собственно, все события.

Каждый раз когда вы пишите someElement.onclick = ..., someElement.addEventListener(...) или просто <a onclick=...> - вы создаете callback и передаете его элементу.

Grundy
  • 81,538
Pavel Mayorov
  • 58,537