1

Колбэки в js так или иначе перекликаются со слушателями событий. Пример моей реализации слушателя:

document.addEventListener("DOMContentLoaded", pageLoadedHandler);

function pageLoadedHandler() {
  console.log('завершена загрузка и построение DOM документа');
}

В этом примере мне понятно что только по достижению события: DOMContentLoaded, вызовется функция pageLoadedHandler

Но есть другой пример с функцией колбэком: Существует 2 функции: func1, func2

func1 должна быть вызвана только по достижению события из функции func2

func1 в данном случае является функцией обратного вызова или колбэком.

Используя иструмент языка: колбэки, нужно func1 передать как аргумент функции 2.

let some_var = "dobrih vecherov";

function func1(a) {
  //do something with a
}

function func2(my_callback, b) {
  //some code here

  //ajax request must return response,
  //but you need to wait a bit until a response from the server arrives

  //some condition for callback function
  if (request.readyState == 4 && request.status == 200) {
    my_callback(b);
  }
  
}

func2(func1, some_var);

Если колбэк вешается на событие, то с таким же успехом я могу запустить функцию func1 по событию:

function func1(a) {
  //do something with a
}

function func2(b) {
  //some code here

  //ajax request must return response,
  //but you need to wait a bit until a response from the server arrives

  //some condition for func1
  if (request.readyState == 4 && request.status == 200) {
    func1(b);
  }

}

func2(some_var);

Результат выполнения обоих сценариев на вид одинаков: func1 вызвана только по достижению события из функции func2

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

1
  • 1
    Вызывая func1 внутри func2, Вы тем самым лишаете возможности вызвать какой-нибудь func3 вместо func1, если в этом возникла бы необходимость. function func3(a) { //do something other with a }
    – Sergey
    12 сен 2021 в 6:48

1 ответ 1

4

Пример вы уже сами привели в самом начале. Почему метод addEventListener не может запустить функцию pageLoadedHandler без явной передачи её в аргументе? Потому что он универсальный, и не знает о ней. И не знает, что именно её нужно запускать, а не сотни других.

Так же и в собственном методе может быть подобная ситуация. Напишите сами аналог метода addEventListener. Сразу станет понятно, что внутри него вы не знаете какую именно функцию вызывать, но знаете, что нужно что-то вызвать. Поэтому требуется аргумент-колбэк. Или какой-то другой способ доставки какой-то функции внутрь другой функции.

Если вы можете вызвать функцию сразу, и всякая универсальность не требуется, то и колбэк не нужен.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.