Проблема callback hell в JavaScript

Да предположим, че искаме да заредим три изображения с помощта на функцията loadImage:

javascriptloadImage('img1.png', function(image, err) {
  document.body.append(image);
});
loadImage('img2.png', function(image, err) {
  document.body.append(image);
});
loadImage('img3.png', function(image, err) {
  document.body.append(image);
});

С този код има нещо нередно. Работата е там, че изображенията ще бъдат добавени в body докато се зареждат. Тоест никой не гарантира на нас, че изображенията ще бъдат добавени именно в реда, от който се нуждаем.

Има още нещо. Да предположим, че искаме да направим нещо, когато всички три изображения са заредени. В нашия код просто няма да можем да уловим този момент, тъй като всички три изображения се зареждат независимо.

Добре, нека преработим кода:

javascriptloadImage('img1.png', function(image1, err1) {
  document.body.append(image1);
  
  loadImage('img2.png', function(image2, err2) {
    document.body.append(image2);
    
    loadImage('img3.png', function(image3, err3) {
      document.body.append(image3);
      console.log('всички изображения са заредени');
    });
  });
});

Решихме и двата описани проблема. Обаче, получихме в замяна друг. Все още не е много видим, но представете си как ще изглежда нашият код, ако в него има зареждане не на три, а, да кажем, десет изображения, плюс ще бъде добавена обработка на изключения. В резултат кодът ще стане изключително нечетим: сложността на кода лавинообразно нараства при влагане на callback функции една в друга. Такава ситуация се нарича callback hell - адът на callback функциите.