ปัญหา 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 ซ้อนกัน สถานการณ์เช่นนี้เรียกว่า callback hell - นรกแห่ง callback

เขียนโค้ดที่ให้มาใหม่ โดยให้ โหลดรูปภาพ 10 ภาพ พร้อมจัดการ ข้อยกเว้น ตรวจสอบให้แน่ใจว่าคุณได้ สถานการณ์ callback hell