Функция обратного вызова — это функция, которая вызывает другую функцию.
Типичный пример — addEventListener:

target.addEventListener(type, listener); 
//the listener is always a function

Каждый раз, когда целевое событие запускается (прослушивается), оно запускает функцию прослушивателя.

Это говорит о том, что такое асинхронное программирование — программа реагирует не сразу. С другой стороны, он ждет, пока не будет выполнено его условие срабатывания, например, вы нажмете кнопку или отправите форму.

Здесь мы практикуем этот механизм с addEventListener и XMLHttpRequest.

Коды изменены из этой статьи

Начальный файл:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simple async sync example</title>
  </head>
  <body>
      <button>Show Coffee</button>
      <script>
        //put your codes here
        
      </script>
  </body>
</html>

1. Создайте функцию loadImage

  1. Инициировать новый объект XMLHttpRequest
  2. Используйте метод XMLHttpRequest **open()** для создания запроса. Синтаксис open(_method, url, async_)
  3. Используйте свойство XMLHttpRequest responseType, чтобы указать тип ответа, например текст, JSON или блоб.
  4. Используйте событие onload в качестве функции обратного вызова, чтобы получить ответ при обновлении (загрузке) содержимого.
  5. Используйте метод XMLHttpRequest send() для отправки запроса
function loadImage(url, type, callback) {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.responseType = type;
    xhr.onload = function() {
        callback(xhr.response);
    };
    xhr.send();
}

2. Создайте функцию displayImage

  1. Используйте метод URL.createObjectURL() для хранения URL-адреса изображения.
  2. Создайте модель DOM image и сохраните в ней переменную URL.
function displayImage(blob) {
    let imageURL = URL.createObjectURL(blob);
    let image = document.createElement('img');
    image.src = imageURL;
    document.body.appendChild(image);
}

3. Создайте прослушиватель событий

  1. Добавьте прослушиватель событий к кнопке.
  2. Внутри слушателя поместите функцию loadImage и настройте ее параметры.
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
    loadImage('coffee.jpg', 'blob', displayImage);
});