Обратные вызовы в JavaScript

Обзор

Для общего определения обратных вызовов в компьютерном программировании я определил их как вызываемый кусок кода в вашей программе, которая передается в другой кусок кода, который фактически называет его внутри себя. Многие языки программирования используют обратные вызовы. Некоторые из более популярных из них являются C, C #, C ++, Python и, конечно, JavaScript. В JavaScript обратные вызовы – это просто исполняемая функция, которая передается другой функции, которая будет выполнять или вернуть ее в какой-то момент времени. Функция, которая получает обратный вызов, называется Функция высшего порядка который определяется как Функция, которая возвращает функцию Отказ Это работает, потому что функции в JavaScript являются Первый класс Это означает, что их можно относиться, как будто они были любой другой переменной.

Типы обратных вызовов

Обратные вызовы в JavaScript могут использоваться как синхронно, так и асинхронно. Синхронные обратные вызовы выполняются прямо до возврата его внешней функции (функция более высокого порядка). Асинхронные обратные вызовы выполняются после функции более высокого порядка, поэтому они могут продолжить свое исполнение в более позднее время после выполнения некоторых других операций.

Синхронный пример

// higher-order function
function promptForName(callback) { 
    const name = prompt('Enter your name')
    callback(name) // gets executed before the function is returned
}

// callback 
function displayName(name) {
    alert(`Hello ${name}`)
}

promptForName(displayName) // displays Hello with entered name when called

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

Асинхронный пример

Хороший способ демонстрации асинхронных обратных вызовов было бы использовать встроенные функции JavaScript addeventListener и совокупность . Функция addeventListener ждет указанное событие, которое будет срабатывать, прежде чем он выполняется и задерживает выполнение кода Code, пока установленное время не будет истекло. Оба эти функции принимают обратные вызовы.

// addEventListener example:

const btn = document.querySelector('button')
btn.addEventListener('click', handleClick)

function handleClick(event) {
  alert("I've been clicked!")
}

// setTimeout example:

setTimeout(() => {
    alert('Times up!');
}, 5000);

console.log('Im executed first!') // logs to the console before setTimeouts callback executes

Первый параметр функции прослушивателя событий – это просто тип действий событий, который он будет слушать, а другой – ссылка на функцию обратного вызова (). Когда это срабатывает, он вызовет функцию обратного вызова. А для Settimeout () требуется два параметра, сначала его функция обратного вызова, затем установленное время для задержки его выполнения, которое составляет 5 секунд для этого примера, поэтому оператор журнала консоли будет выполнен до того, как обратный вызов будет вызван.

Резюме

Обратные вызовы являются общим и важным инструментом в панели инструментов любого разработчика JavaScript. Они часто используются в большинстве приложений JavaScript и полезны для выполнения кода как асинхронно, так и синхронно. Например, прослушивание таких событий, как форма представления формы от пользователя с слушателем событий или фильтрация дубликатов из массива пользовательских данных с помощью Фильтр () Функция, которая принимает обратный вызов, так как его аргумент, оба сценария, когда обратные вызовы могут быть удобны.

Ресурсы

Первоначально опубликовано в https://coderjay06.github.io 4 апреля 2021 года.

Оригинал: “https://dev.to/coderjay06/callbacks-in-javascript-15ig”