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

Пусть мы хотим с помощью функции `loadImage` загрузить три картинки:

`loadImage('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` по мере их загрузки. То есть никто не гарантирует нам, что картинки будут добавлены именно в том порядке, который нам нужен.

Есть еще кое-что. Пусть мы хотим сделать что-нибудь, когда будут загружены все три картинки. В нашем коде мы просто не сможем поймать этот момент, так как все три картинки грузятся независимо.

Окей, переделаем код:

`loadImage('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 hell - ад коллбэков.

Перепишите приведенный код так, чтобы в нем была загрузка `10` картинок плюс обработка исключений. Убедитесь, что у вас получается ситуация callback hell.

← →
↑
en ru