使用promise实现，加载100张图片，每次最多同时加载5张图片

在前端开发中，你可以使用JavaScript的Promise以及并发控制来实现加载100张图片，同时确保每次最多只加载5张图片。以下是一个简单的示例代码，它演示了如何使用Promise来完成这个任务：

// 模拟加载图片的函数，返回一个Promise
function loadImage(url) {return new Promise((resolve, reject) => {const img = new Image();img.onload = () => resolve(img);img.onerror = reject;img.src = url;});
}// 并发控制函数，确保同时加载的图片数量不超过指定限制
function loadImagesWithConcurrency(urls, maxConcurrency) {let currentlyLoading = 0; // 当前正在加载的图片数量let loadedImages = []; // 已加载的图片数组let index = 0; // urls数组的索引const loadNext = () => {while (currentlyLoading < maxConcurrency && index < urls.length) {currentlyLoading++;loadImage(urls[index++]).then(img => {loadedImages.push(img);console.log(`Loaded image ${img.src}`);}).catch(error => {console.error(`Failed to load image: ${error}`);}).finally(() => {currentlyLoading--;if (index < urls.length) {loadNext(); // 尝试加载下一张图片}});}};loadNext(); // 开始加载图片return new Promise(resolve => {// 当所有图片都尝试加载后，解决这个Promiseif (urls.length === 0) {resolve(loadedImages);} else {const checkIfFinished = () => {if (currentlyLoading === 0) {resolve(loadedImages);} else {setTimeout(checkIfFinished, 100); // 等待一段时间后再次检查}};checkIfFinished();}});
}// 使用示例：加载100张图片，每次最多加载5张
const imageUrls = Array.from({ length: 100 }, (_, i) => `https://example.com/image${i}.jpg`);
loadImagesWithConcurrency(imageUrls, 5).then(images => {console.log('All images loaded', images);
});

这个示例代码定义了两个主要的函数：loadImage和loadImagesWithConcurrency。loadImage函数模拟了加载单张图片的过程，并返回一个Promise。loadImagesWithConcurrency函数则负责并发控制，它使用Promise来确保在任何时候都不会有超过指定数量的图片正在加载。当所有图片都尝试加载后，它会解决并返回一个包含所有已加载图片的数组。