Функция callback. Объясните пожалуйста на пальцах!

@Freeze_Breeze · Регистрация: 12.01.2016

Студворк — интернет-сервис помощи студентам

Вот как я понимаю обычную функицю (инструкцию определения функции "Function Declaration", смотреть рис.):
1) Интерпретатор Java Script считывает функцию и сохраняет ее в памяти. Этот шаг просто подготавливает браузер к выполнению функции, которое произойдет позднее.
2) Функция вызывается, ей передается аргумент(информация) 'Hello'.
3) Аргумент(информация) переданная функции сохраняется в новой переменной под именем 'message'. Этот шаг эквивалентен коду var message = 'Hello';
4) Наконец функция выполняется, выводя на веб страницу значение сохраненное в переменной message
Все, наша функция отработала, все красиво, все работает.

JavaScript
1
2
3
4
function print(message) {
    console.log(message);
}
print('Hello');

Но что простите происходит вот здесь (рис. 2)?

JavaScript
1
2
3
4
5
6
7
var func = function(callback) {
    var name = 'Breeze';
    callback(name);
};
func(function(n) {
    console.log('Freeze ' + n);
});

Про callback знаю только то, что мы передаем функцию в качестве аргумента, то есть для передачи функции которая будет выполнена после выполнения функции в которую она передается.
Что могу добавить от себя по рис. 2
1) Мы пишем выражение определение функции (Function Expression), анонимная функция
6) Передаем в нашу функцию аргумент 'callback'
2) В нашей функции мы инициализируем переменную name и присваиваем ей строковое значение 'Breeze';
3) В нашу переменную 'callback' мы передаем параметр нашей переменной name,
то есть name = 'Breeze';
4) Ну а дальше у меня начали плавится мозги из за непонятия происходящего в коде под пунктами 4 и 5.
4) Мы вроде бы, как бы определяем анонимную функцию, которая является параметром нашей первой функции var func = function(callback){}
7) Это наш параметр, который мы будем использовать в нашей функции не понятно как и каким он боком здесь вообще оказался и какое у него значение или строковый литерал в него передаем не понятно.
5) Выводим в консоль строку 'Freeze' + n, от куда 'n' и как оно принимает какое нибудь значение или что эта буква здесь вообще забыла я не понимаю.
Если кто то сможет объяснить на пальцах, по цифрах, буду очень признателен.

@Lazy_Den · 14.05.2018, 23:38

Сообщение от Freeze_Breeze

Ну а дальше у меня начали плавится мозги

Да, JS такой ))
Вы правильно начали проходить сценарий по шагам, но тут еще нужно подключать немного воображения. Если записать так, то более понятно будет или всё равно нужно разъяснить?

JavaScript
1
2
3
4
5
6
7
8
9
10
var func = function(callback) {
  var name = 'Breeze';
  callback(name);
};
 
 
var otherFunc = function(n) {
  console.log('Freeze ' + n);
};
func(otherFunc);

Добавлено через 10 минут
Чтобы еще легче было, представляйте вместо имён переменных, значения, которые им присваиваются. То есть, вместо callback подставьте анонимную функцию, которую аргументом передаёте в функцию func.

@Freeze_Breeze · 15.05.2018, 00:10 **[ТС]**

Lazy_Den,
Единственное, что не понятно это в каком месте мы параметру(переменной) 'n' присваиваем значение строки 'Freeze', если в первом примере функции var func = function(callback) мы четко дали понять var name = 'Breeze'; callback(name); То во второй функции ('Freeze ' + n); в этой строке??? Не понятно. И еще в какой последовательности выполняются эти функции? Ну по выводу ответа в консоль первой отрабатывает var otherFunc = function(n), а за ней var func = function(callback) и уже потом только мы получаем ответ func(otherFunc);, правильно? Если правильно то почему так происходит? И где черт возьми мы параметру 'n' присваиваем эти буквы 'Freeze я просто не понимаю этого и дико нервничаю.

@Lazy_Den · 15.05.2018, 00:23

Сообщение от Freeze_Breeze

я просто не понимаю

Еще упрощаем:

JavaScript
1
2
3
4
5
6
7
8
9
var func = function() {
  var name = 'Breeze';
  // Всё, что ниже - по сути то, что было строкой callback(name)
  (function(n) {
    console.log('Freeze ' + n);
  })(name);
};
 
func();

Добавлено через 2 минуты
Вот этот код

(function(n) {

    console.log('Freeze ' + n);

})

== callback, ну а (name) так и осталось.
Я ж говорю, представляйте на месте переменной то, что в ней находится

@Freeze_Breeze · 15.05.2018, 00:32 **[ТС]**

Lazy_Den,
Я правильно понимаю

JavaScript
1
2
3
4
5
6
7
8
9
var func = function(name) {
    //тело функции
}
console.log('Breeze'/*<-- Эту строку мы передаем в параметр 'name' функции func*/);
 
(function(n) {
    //тело функции
    console.log('Freeze' + n /*<-- Этой строкой мы присваиваем переменной 'n' значение 'Freeze'*/);
});

Если выражаться языком Java Script, то console.log('Breeze') === console.log('Freeze' + n)
Я правильно понял?

@Lazy_Den · 15.05.2018, 00:58

Сообщение от Freeze_Breeze

Я правильно понял?

Комментарии к коду - близко к правде, только с нервами еще не справились и сам код сумбурный получился.
Давайте для закрепления попробуем еще с другой стороны зайти.
1. Первый шаг - вызов функции func с передачей ей анонимной функции.
2. func принимает анонимную функцию и присваивает её переменной callback. То есть, это мы могли бы записать так:

JavaScript
1
2
3
var callback = function(n) {
  console.log('Freeze ' + n);
};

3. Присваивается значение 'Breeze' переменной name
4. Вызывается наша многострадальная функция, присвоенная переменной callback, с передачей ей в качестве аргумента переменной name

JavaScript
1
callback(name);

5. Теперь уже выполняется та самая анонимная функция. Значение переданной переменной name, присваивается переменной n/ Проставим вручную

JavaScript
1
2
3
function('Breeze') {
  console.log('Freeze ' + 'Breeze');
};

Добавлено через 6 минут

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var func = function(callback) {
 
  // Эта часть - то, что происходит при приёме агрумента автоматом
  // функция присваивается переменой callback
  // визуализируем для понимания
  callback = function(n) {
    console.log('Freeze ' + n);
  };
 
  // обычный вызов функции
  callback('Breeze');
 
};

@Freeze_Breeze · 15.05.2018, 01:06 **[ТС]**

Lazy_Den, спасибо Вам большое, что все разъяснили, но с этим я пожалуй разберусь уже завтра, так ка голова совсем не варит. Еще раз спасибо.

@Lazy_Den · 15.05.2018, 01:10

Не по теме:

Сообщение от Freeze_Breeze

с этим я пожалуй разберусь уже завтра

Правильно. В нашем деле спешка не нужна :)

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	15.05.2018, 00:10 [ТС]
	Lazy_Den, Единственное, что не понятно это в каком месте мы параметру(переменной) 'n' присваиваем значение строки 'Freeze', если в первом примере функции `var func = function(callback)` мы четко дали понять var name = 'Breeze'; callback(name); То во второй функции `('Freeze ' + n);` в этой строке??? Не понятно. И еще в какой последовательности выполняются эти функции? Ну по выводу ответа в консоль первой отрабатывает var otherFunc = function(n), а за ней var func = function(callback) и уже потом только мы получаем ответ func(otherFunc);, правильно? Если правильно то почему так происходит? И где черт возьми мы параметру 'n' присваиваем эти буквы 'Freeze я просто не понимаю этого и дико нервничаю. 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	15.05.2018, 01:06 [ТС]
	Lazy_Den, спасибо Вам большое, что все разъяснили, но с этим я пожалуй разберусь уже завтра, так ка голова совсем не варит. Еще раз спасибо. 0