«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг. Создание сайтов Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Выбрать тему для сайта! Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Игра «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих



Что такое callback-функции в JavaScript и для чего они нужны?

Callback (в переводе с английского call — вызов, back — обратный) или функция обратного вызова.

Функции в JavaScript вызываются последовательно одна за другой, но порядок их выполнения может быть НЕ последовательным.

И прежде чем начать говорить о callback-функциях, рассмотрим пример с классическими функциями.



Последовательная и асинхронная работа функций

Есть две функции: first() и second(). Сначала вызывается first, затем second.

Но первая функция выполняется с задержкой.

В итоге сначала мы получаем результат работы 2-ой функции second(). А через некоторое время - результат работы 1-ой функции first().

Пример 1.1

/* Функция с задержкой 1 сек. */
function first(){
    // do something
    function any(){
        console.log(1);
    }
    setTimeout(any, 1000);
}

function second(){
    console.log(2);
}     

first();
second();

Результат


2
1

В примере при помощи метода setTimeout смоделирована ситуация, при которой одна из функций выполняется с задержкой. В результате порядок вызова функций и порядок их выполнения асинхронны.

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

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

Что такое callback-функция?

Теперь можно перейти к ответу на вопрос: что такое callback-функция?

callback-функция - это функция, которая должна быть выполнена после того, как другая функция завершит свое выполнение.

Шаблон callback-функции

Рассмотрим пример: в функцию в качестве аргумента передается другая - callback-функция, то есть ТА, которая будет выполняться после выполнения основной функции.

Пример 2.1

// Функция №1
function learnJS(lang, callback){
    console.log(`Я учу ${lang}`);
    callback(); // Вызов callback-функции
}

// Функция №2
function process(){
    console.log('Я прошел этот урок');
}

learnJS('JavaScript', process);

Результат


Я учу JavaScript
Я прошел этот урок

1. Есть функция learnJS с двумя аргументами:

- 1-ый аргумент - в данном случае какое-либо строковое значение;
- 2-ой аргумент - это другая (callback) функция.

2. Функция process передается в качестве аргумента функции learnJS и, соответственно, функция process выполняется после выполнения функции learnJS.

Стоит обратить внимание: когда функция №2 передается в качестве аргумента в функцию №1: learnJS('JavaScript', process); то в круглых скобках указывается только имя функции №2 - без круглых скобок.

Так как функция №2 не вызывается, а именно передается. А вызываться она будет уже внутри функции №1 тогда, когда до нее дойдет JS-интерпретатор.

Как вариант, в качестве аргумента функции learnJS может использоваться анонимная функция (функция без имени).

Пример 2.2

function learnJS(lang, callback){
    console.log(`Я учу ${lang}`);
    callback();
}

learnJS('JavaScript', function(){
    console.log('Я прошел этот урок');
});

Результат


Я учу JavaScript
Я прошел этот урок

Итак, использование callback-функций позволяет соблюдать последовательность выполнения функций.

callback-функции на практике

callback-функции на практике используются довольно часто, например, при запросах к серверу. А серверное программирование на Node.js во многом основано на работе с callback-функциями.

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

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

Читайте также...

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Отзывы и комментарии:

Добавил(а): Алексей
Дата: 2021-07-30

Доступно-понятно. Про передачу (не вызов) функции без скобок только на вашем сайте нашел. Спасибо!

Добавил: Admin
Дата: 2021-07-30

Пожалуйста :)

Добавил(а): ilnaz
Дата: 2023-03-10

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

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 2
Что такое callback-функция - Аргумент другой функции
2222
Условия if else - Конструкция switch case - Тернарный оператор
720
Циклы while и for - Операторы break и continue
944
Практика часть 2 – Циклы и Условия
4579
Объявление функций – Стрелочные функции ES6
1152
Методы и свойства строк и чисел - Метод substr - Индекс строки
570
Практика часть 3 - Используем функции
1522
Свойства и методы объектов - Деструктуризация объектов ES6
2880
Методы массивов - Перебор элементов массива - Псевдомассивы
2182
Передача данных по ссылке и по значению – Клонирование объекта
536
Метод assign() – Копирование исходных объектов в целевой объект
593
Копирование массивов - Оператор spread
2026
Прототипное Программирование - Прототип и Экземпляр Объекта
522
Свойство proto - Методы Object.create и Object.setPrototypeOf
725
Практика часть 4 - Используем функции как методы объекта
10989
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
Популярные заметки
Последние заметки