Что такое функция обратного вызова в JavaScript?

Автор оригинала: FreeCodeCamp Community Member.

Эта статья дает краткое введение в концепцию и использование функций обратного вызова на языке программирования JavaScript.

Функции объекты

Первое, что нам нужно знать, это то, что в JavaScript функции – это первые классы объекты. Таким образом, мы можем работать с ними так же, как мы работаем с другими объектами, как присвоение их переменным и передавать их в качестве аргументов в другие функции. Это важно, потому что это последняя техника, которая позволяет расширять функциональность в наших приложениях.

Функции обратного вызова

А Функция обратного вызова это функция, которая передается Как аргумент в другую функцию, чтобы быть «вызванным» позже. Функция, которая принимает другие функции в качестве аргументов, называется Функция высшего порядка , который содержит логику для Когда Функция обратного вызова выполняется. Это сочетание этих двух, которые позволяют нам расширить нашу функциональность.

Чтобы проиллюстрировать обратные вызовы, давайте начнем с простого примера:

function createQuote(quote, callback){ 
  var myQuote = "Like I always say, " + quote;
  callback(myQuote); // 2
}

function logQuote(quote){
  console.log(quote);
}

createQuote("eat your vegetables!", logQuote); // 1

// Result in console: 
// Like I always say, eat your vegetables!

В приведенном выше примере Createquote Это функция более высокого порядка, которая принимает два аргумента, второй – обратный вызов. logquote Функция используется для передачи в качестве нашей функции обратного вызова. Когда мы выполняем Createquote Функция (1) , обратите внимание, что мы Не добавление скобки к logquote Когда мы передаем его как аргумент. Это потому, что мы не хотим выполнить функцию нашего обратного вызова сразу, мы просто хотим пройти определение функции вместе с функцией более высокого порядка, чтобы ее можно было выполнить позже.

Кроме того, мы должны обеспечить, чтобы функция обратного вызова мы пройдем в ожидании аргументов, которые мы поставляем эти аргументы при выполнении обратного вызова (2) . В приведенном выше примере это было бы Обратный вызов (MyQuote); Заявление, так как мы знаем, что logquote ожидает, что цитата будет передана.

Кроме того, мы можем пройти в анонимных функциях как обратных вызовов. Ниже вызов Createquote будет иметь тот же результат, что и вышеприведенный пример:

createQuote("eat your vegetables!", function(quote){ 
  console.log(quote); 
});

Кстати, ты не есть Чтобы использовать слово «Callback» как имя вашего аргумента, JavaScript просто нужно знать, что это правильное имя аргумента. На основании приведенного выше примера функция ниже будет вести себя точно так же.

function createQuote(quote, functionToCall) { 
  var myQuote = "Like I always say, " + quote;
  functionToCall(myQuote);
}

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

Большую часть времени мы создаем программы и приложения, которые работают в Синхронный манера. Другими словами, некоторые из наших операций начинаются только после завершения предыдущих. Часто, когда мы запрашиваем данные из других источников, таких как внешний API, мы не всегда не всегда знаем Когда Наши данные будут поданы обратно. В этих случаях мы хотим дождаться ответа, но мы не всегда хотим, чтобы наше наше приложение шлифовать до остановки, пока наши данные получают. Эти ситуации находятся в том, где функции обратного вызова пригодны.

Давайте посмотрим на пример, который имитирует запрос на сервер:

function serverRequest(query, callback){
  setTimeout(function(){
    var response = query + "full!";
    callback(response);
  },5000);
}

function getResults(results){
  console.log("Response from the server: " + results);
}

serverRequest("The glass is half ", getResults);

// Result in console after 5 second delay:
// Response from the server: The glass is half full!

В приведенном выше примере мы производим просьбу на сумму сервера. Через 5 секунд протолкнут ответ, а затем функция обратного вызова GetResults выполняется. Чтобы увидеть это в действии, вы можете скопировать/вставить вышеуказанный код в инструмент разработчика вашего браузера и выполнить его.

Кроме того, если вы уже знакомы с сентиментальный Затем вы использовали функции обратных заходов. Анонимный аргумент функции передан в приведенный выше примера Сетримс Функциональный вызов также является обратным вызовом! Таким образом, оригинальный обратный вызов примера фактически выполняется другим обратным вызовом. Будьте осторожны, чтобы не устанавливать слишком много обратных вызовов, если вы можете помочь ему, так как это может привести к чему-то под названием «Callback Ad Hell»! Как подразумевает имя, это не радость иметь дело с.

Функции объекты

Функции обратного вызова

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

Читайте ещё по теме: