Tải hình ảnh không đồng bộ trong vòng lặp bằng JavaScript

Giả sử đường dẫn đến các hình ảnh được lưu trữ trong một mảng:

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

Chúng ta có thể tải những hình ảnh này trong một vòng lặp:

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

Mã code trông đẹp và không rơi vào tình trạng callback hell, tuy nhiên, chúng ta đã quay lại với hai vấn đề của mình: thứ tự của các hình ảnh không được đảm bảo và không thể bắt được thời điểm tất cả hình ảnh đã được tải xong.

Và không có giải pháp trong tình huống này: không thể chạy một vòng lặp, sử dụng một hàm không đồng bộ bên trong nó, rồi sau đó bắt được thời điểm tất cả các hàm của vòng lặp hoàn tất. Hoặc là bạn không cần bắt thời điểm đó và đoạn mã trên sẽ phù hợp với bạn, hoặc là chào mừng bạn đến với callback hell.

Tuy nhiên, đừng thất vọng - vấn đề có thể được giải quyết thông qua Promises, mà chúng ta sẽ học trong các bài học tiếp theo.