时刻保持某个数量的并发下载请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
  </head>
  <body>
    <script>
      function downloadImage(url) {
        // const img = new Image();
        return new Promise((resolve) => {
          // console.log(`开始下载: ${url}`);
          const time = Math.random() * 3000; // 随机模拟下载时间
          // 模拟图片下载
          setTimeout(() => {
            console.log(`下载完成: ${url}`);
            resolve(`图片数据: ${url}`);
          }, time);
        });
        // img.onload = () => {
        //   console.log(`下载完成: ${url}`);
        //   resolve(`图片数据: ${url}`);
        // };

        // img.onerror = () => {
        //   // 记录错误
        //   errors[index] = new Error(`Failed to load image: ${url}`);
        //   resolve(); // 即使失败也 resolve，保证流程继续
        // };

        // img.src = url;
      }

      // 并发控制函数
      async function downloadWithConcurrency(imageUrls, maxConcurrency = 3) {
        // 下载完成结果
        const results = [];
        // 正在执行下载的请求
        const executing = new Set();

        for (const url of imageUrls) {
          // 如果达到最大并发数，等待其中一个完成
          if (executing.size >= maxConcurrency) {
            await Promise.race(executing);
          }

          const promise = downloadImage(url).then((result) => {
            results.push(result);
            executing.delete(promise);
          });

          executing.add(promise);
        }

        // 等待所有剩余任务完成
        await Promise.all(executing);
        return results;
      }

      // 测试
      const imageUrls = [
        "image1.jpg",
        "image2.jpg",
        "image3.jpg",
        "image4.jpg",
        "image5.jpg",
        "image6.jpg",
        "image7.jpg",
        "image8.jpg",
      ];

      downloadWithConcurrency(imageUrls)
        .then((results) => {
          console.log("所有图片下载完成:", results);
        })
        .catch((error) => {
          console.error("下载出错:", error);
        });
    </script>
  </body>
</html>
时刻保持某个数量的并发下载请求

推荐阅读更多精彩内容
