Problem callback hell w JavaScript

Załóżmy, że chcemy za pomocą funkcji loadImage załadować trzy obrazy:

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

Z tym kodem jest coś nie tak. Chodzi o to, że obrazy będą dodawane do body w miarę ich ładowania. Oznacza to, że nikt nie gwarantuje nam, że obrazy zostaną dodane właśnie w tej kolejności, której potrzebujemy.

Jest jeszcze coś. Załóżmy, że chcemy zrobić coś, gdy wszystkie trzy obrazy zostaną załadowane. W naszym kodzie po prostu nie będziemy w stanie wyłapać tego momentu, ponieważ wszystkie trzy obrazy ładują się niezależnie.

Okay, przeróbmy kod:

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('wszystkie obrazy załadowane');
    });
  });
});

Rozwiązaliśmy oba opisane problemy. Jednakże, otrzymaliśmy w zamian inny. Na razie jeszcze nie jest on mocno widoczny, ale wyobraźcie sobie, jak będzie wyglądał nasz kod, jeśli będzie w nim ładowanie nie trzech, a, powiedzmy, dziesięciu obrazów, plus zostanie dodana obsługa wyjątków. W rezultacie kod stanie się bardzo nieczytelny: złożoność kodu lawinowo narasta przy zagnieżdżeniu callbacków. Taka sytuacja nazywa się callback hell - piekło callbacków.