Ресурсы: Callback-функции
Рассмотрим на примере.
Для начала создадим функцию, внутри которой будут происходить какие-то действия, но с какой-то задержкой в коде (задержку делаем, чтобы сымитировать, например, загрузку данных с сервера, что нужно какое-то время, чтобы эти данные загрузить).
И вторую функцию, в которой задержки не будет.
Код
function first() {
// здесь какие-то действия
setTimeout(function () {
console.log(1);
}, 500);
}
function second() {
console.log(2);
}
first();
second();
И вот что мы получим в консоли, результат работы второй функции выведется первым, несмотря на то, что вызывали её второй по порядку, это объяснимо, ведь код первой функции выполняется после задержки.
На практике, часто разные функции могут использовать общие данные, например, результат работы первой функции используется во второй функции.
Но, не зная, сколько по времени будет выполняться первая функция, мы можем получить картину, где вторая функция выполниться быстрее и будет пытаться использовать данные, которые еще не пришли от первой функции.
Если функции в коде идут одна за другой, не факт, что и выполняются они также, одна за другой.
Callback-функция - это функция, которая должна быть выполнена лишь после того, как другая функция завершит свою работу.
Код
function learnJS(lang, callback) {
console.log(`Я изучаю ${lang}`);
callback();
}
learnJS('JavaScript', function () {
console.log(`Выучил уже много материалов`);
});
Что мы тут видим?
Мы вызываем функцию
learnJS, при этом передаём вторым аргументом другую функцию, которая выполнится гарантированно лишь после того, как в теле функции
learnJS завершит работу её код.
То есть сначала выполнится этот код:
Код
console.log(`Я изучаю ${lang}`);
и лишь после этого вызовется функция, которую мы передавали как второй аргумент, и выполнится её код
Функцию можно передавать как аргумент и таким образом, то есть передавать ссылку на функцию:
Код
function learnJS(lang, callback) {
console.log(`Я изучаю ${lang}.`);
callback();
}
function done() {
console.log(`Выучил уже много материалов`);
}
learnJS('JavaScript', done);
Цитата
Я изучаю JavaScript.
Выучил уже много материалов
Добавлять комментарии могут только зарегистрированные пользователи.
