【6-3作业】有最大并发数限制的Promise设计

Question

// Promise加载图片
var loadImg = (url) => {
	return new Promise((resolve, reject) => {
            // 创建图片
            var img = new Image()
            // 加载成功
            img.onload = () => {
            resolve(img)
            }
            // 图片加载
            img.onerror = () => {
            reject(new Error('图片加载失败'))
            }
            img.src = url
            })
            }
            var imgs = ['https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2553992741.webp',
            'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2555538168.webp',
            'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2555538168.webp'
            ]
            // 并行加载
            var loadImgAsync = (imgs)=>{
            imgs.forEach(async (item)=>{
            let img = await loadImg(item)
            document.body.appendChild(img)
	});
}
loadImgAsync(imgs)

如何实现十张十张加载呢

Answer 1

茵风泳月 2019-05-27 11:27:55

同学你好，可以有很多方式，我花了几分钟随便写了一个，肯定不算最好，但基本能用，可供参考：

function batchLoadImgs(imgs, onAllLoaded, maxSize = 10) {
    const left = imgs.slice();
    let counter = 0;

    function promiseWrap(src) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.onload = resolve;
            img.onerror = reject;
            img.src = src;
        });
    }

    function onDone() {
        const top = left.shift();
        if (top) {
            promiseWrap(top).then(onDone);
        }

        if (++counter === imgs.length) {
            onAllLoaded();
        }
    }

    const firstBatch = left.slice(0, Math.min(maxSize, left.length));
    
    left.splice(0, firstBatch.length);
    
    firstBatch.forEach(img => {
        promiseWrap(img).then(onDone);
    });
}

祝您学习愉快！

• 提问者 qq_我的心向大海_ckuGNU #1

  非常感谢！

• oO小小的宇Oo #2

  请问老师，有必要声明counter并且每次更新吗，一旦top非真，说明数组已经空了，直接else{ onAllLoaded();} ，这样可以吗？

• 袁门弟子 #3

  操作风骚啊

点开查看后面1条评论

Answer 2

su1per 2019-07-03 15:59:13

答主的答案才用了async await, 会让100张图片变成同步顺序加载，会耗时很久