การโหลดภาพแบบอะซิงโครนัสในลูปด้วย JavaScript

ให้เส้นทางไปยังรูปภาพเก็บอยู่ในอาร์เรย์:

let arr = ['img1.png', 'img2.png', 'img3.png'];

เราสามารถโหลดรูปภาพเหล่านี้ในลูปได้:

for (let path of arr) {
	loadImage(path, function(image, err) {
		document.body.append(image);
	});
}

โค้ดออกมาสวยงามและไม่มี callback hell, อย่างไรก็ตาม เรากลับมาที่ปัญหาสองประการของเรา: ลำดับของรูปภาพไม่ได้รับการรับรองและเป็นไปไม่ได้ ที่จะจับช่วงเวลาที่รูปภาพทั้งหมดโหลดเสร็จ

และไม่มีวิธีแก้ไขในสถานการณ์นี้: เป็นไปไม่ได้ ที่จะเริ่มลูป ใช้ฟังก์ชันอะซิงโครนัสภายในนั้น แล้วจับช่วงเวลาสิ้นสุดของฟังก์ชันทั้งหมดในลูป ไม่ว่าคุณจะไม่ต้องการจับช่วงเวลานี้และโค้ดข้างต้น นั้นเหมาะกับคุณ หรือยินดีต้อนรับสู่ callback hell

แต่ ไม่ต้องเสียใจ - การแก้ไขปัญหานั้น เป็นไปได้ผ่าน Promise ซึ่งเราจะ ศึกษาในบทเรียนต่อไป