Функцията за обратно извикване, а именно, е функция, която извиква обратно с друга функция.
Често срещаният пример е 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 или blob.
  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 и запазете 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);
});