JavaScript - это однопоточный язык, что означает, что вы можете запускать только один процесс за раз.

Но подождите, что, если какой-то процесс занимает слишком много времени для выполнения, например, кода, который делает запрос к серверу для получения таких данных.

let xhr = new XMLHttpRequest();
xhr.open(“GET”, “URL”, true);
xhr.send();.

если JavaScript - однопоточный язык, он должен блокировать код и ждать ответа. Но это не тот случай, когда javascript не блокирует все выполнение кода, написанного после. Таким образом, возникает вопрос: какой трюк использует javascript для запуска этого кода.

Что такое функция обратного вызова?
Функции обратного вызова похожи на обычные функции в javascript, единственное, что отличает их от обычных функций, - это то, что они передаются в качестве аргумента функции.

function getData(filename,callback) {
// file read code
//after the file read is done callback function is called with or without argument which indicates that file read operation is done
callback(‘data’);
}

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

let xhr = new XMLHttpRequest();
xhr.open("GET", "URL", true);
xhr.send();
xhr.addEventListener('load',function(){
if (this.status === 200 && this.readyStateChange === 4){
console.log(JSON.parse(xhr.responseText);
}
});

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

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

Создайте функцию, которая принимает другую функцию в качестве аргумента

function add(a, b, callBack) {
let ressult = a+b;
callBack(result);
}

Создайте функцию, которую вы можете передать указанной выше функции

Это похоже на любую другую обычную функцию javascript

function printResult(result) {
console.log(result);
}

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

добавить (10, 20, printResult);

Вывод для приведенного выше кода будет

Если вы нашли этот пост полезным, поставьте лайк ❤ спасибо за чтение и следите за такими сообщениями