promise车轮战的实现
在这里我们实现了一个预先加载图片的函数loadImg 然后初始化了一个list里面包含了一些imgUrl。
const loadImg = (url)=>{
return new Promise((resolve,reject)=>{
console.log(urls.indexOf(url))
let img = new Image()
img.onerror=(err)=>{
reject(err)
}
img.onload=(res)=>{
resolve(res)
}
img.src=url
})
}
const urls = [
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.cxydw.net%3A666%2Fpicture001%2F2020%2F02%2F18%2F15120G12052-1-1200.jpg&refer=http%3A%2F%2Fimg.cxydw.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630936388&t=9b646414946c50998b9115a931901169",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F07287257811d2201055dfea465786f308f9121be198c2-oeWNdr_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630936418&t=cf3c3d80f023eb938447830f46c4ea01",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.135editor.com%2Ffiles%2Fusers%2F26%2F264986%2F201512%2F4O6eTgOm_0LZt.jpg&refer=http%3A%2F%2Fimage.135editor.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630936418&t=ea3af7beef2834c266f6853e0b087691",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fphoto%2Fl%2Fpublic%2Fp2179905929.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630936418&t=a862aba3e0637ebf6a0acf1bbe8e8f9e",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F27e01a9c74649b9fb9bdd449474b71f557e7efe31cdf6-mgB6va_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630936418&t=56985afb7d21bfa959e483cc589fbb58"]
// 定义了一个 loadByLimit 函数中间使用到了urllist和刚才定义的那个函数，然后给出了一个limit限制数。
const loadByLimit = (urlIds,loadImg,limit)=>{
let urls = [...urlIds]
if(urls.length<=limit){
return Promise.all(urls.map((url)=>loadImg(url)))
}
const tempUrls = urls.splice(0,limit).map(url=>loadImg(url))
urls.reduce((prev,cur)=>{
debugger;
return prev.then(()=>{
res = Promise.race(tempUrls)
}).catch((err)=>{throw err})
.then(promise=>{
let position = tempUrls.indexOf(promise)
tempUrls.splice(position,1,loadImg(cur))
})
},Promise.resolve())
}
loadByLimit(urls,loadImg,2)
