var urls = ['https://www.kkkk1000.com/images/getImgData/getImgDatadata.jpg', 'https://www.kkkk1000.com/images/getImgData/gray.gif', 'https://www.kkkk1000.com/images/getImgData/Particle.gif', 'https://www.kkkk1000.com/images/getImgData/arithmetic.png', 'https://www.kkkk1000.com/images/getImgData/arithmetic2.gif', 'https://www.kkkk1000.com/images/getImgData/getImgDataError.jpg', 'https://www.kkkk1000.com/images/getImgData/arithmetic.gif', 'https://www.kkkk1000.com/images/wxQrCode2.png'];
function loadImg(url) {
return new Promise((resolve, reject) => {
const img = new Image()
img.onload = () => {
console.log('一张图片加载完成');
console.log(url);
resolve();
}
img.onerror = reject;
img.src = url;
})
};
function limitLoad(urls, handler, limit) {
// 对数组做一个拷贝
const sequence = [...urls];
let promises = [];
//并发请求到最大数
promises = sequence.splice(0, limit).map((url, index) => {
// 这里返回的 index 是任务在 promises 的脚标,用于在 Promise.race 之后找到完成的任务脚标
return handler(url).then(() => {
return index;
});
});
// 利用数组的 reduce 方法来以队列的形式执行
return sequence.reduce(
(last, url, currentIndex) => {
debugger;
return last.then(() => {
// 返回最快改变状态的 Promise
return Promise.race(promises)
}).catch(err => {
// 这里的 catch 不仅用来捕获前面 then 方法抛出的错误
// 更重要的是防止中断整个链式调用
console.error(err)
}).then((res) => {
// 用新的 Promise 替换掉最快改变状态的 Promise
promises[res] = handler(sequence[currentIndex]).then(() => {
// 这个位置的返回值可以是其他数字,如果不是res那么数组就会增加如给promise[100]替换,那就不是替换了.
// 如果是res那么数组长度不会改变
return res
});
})
},Promise.resolve())
.then(() => {
// console.log(333);
return Promise.all(promises)
})
}
// limitLoad(urls, loadImg, 3);
/*
因为 limitLoad 函数也返回一个 Promise,所以当 所有图片加载完成后,可以继续链式调用*/
limitLoad(urls, loadImg, 3).then(() => {
console.log('所有图片加载完成');
}).catch(err => {
console.error(err);
})
Promise是队列的,也会以一层一层的执行,并且保存上一层的状态。每层全部走完之后再走下一层。层数相同时按照添加顺序执行。层数不同先按照层数执行。