Problém callback hell v JavaScriptu

Předpokládejme, že chceme pomocí funkce loadImage načíst tři obrázky:

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);
});

S tímto kódem je něco v nepořádku. Jde o to, že obrázky budou přidány do body jakmile se načtou. To znamená, že nám nikdo negarantuje, že obrázky budou přidány právě v pořadí, které potřebujeme.

Je tu ještě něco. Předpokládejme, že chceme udělat něco, až budou načteny všechny tři obrázky. V našem kódu jednoduše nemůžeme zachytit tento okamžik, protože všechny tři obrázky se načítají nezávisle.

Dobře, přepišme kód:

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('všechny obrázky jsou načteny');
    });
  });
});

Vyřešili jsme oba popsané problémy. Avšak jsme za to dostali jiný. Zatím ještě není moc viditelný, ale představte si, jak bude vypadat náš kód, pokud v něm bude načítání ne tří, ale řekněme deseti obrázků, plus bude přidáno zpracování výjimek. Ve výsledku se kód stane velmi nečitelným: složitost kódu lavinovitě narůstá při vnořování callbacků do sebe. Tato situace se nazývá callback hell - peklo callbacků.