在前端優(yōu)化性能的時候, 我們可以考慮使用并發(fā)控制
比如首頁有10個并發(fā)請求, 先發(fā)送3個, 3個中哪一個響應(yīng)了, 立即發(fā)送第4個, 直到第10個發(fā)送完成
function limitLoad(urls, handler, limit) {
const sequence = [].concat(urls)
let promise = []
promise = sequence.splice(0, limit).map((url, index) => {
return handler(url).then(()=>{
return index
})
})
let p = Promise.race(promise)
// for循環(huán)給p賦值相當(dāng)于.then().then()鏈?zhǔn)秸{(diào)用
for (let i= 0; i< sequence.length; i++) {
p = p.then(res => {
promise[res] = handler(sequence[i]).then(()=>{
return res
})
return Promise.race(promise)
})
}
}
const urls =[
{info:'1', time:2000},
{info:'2', time:1000},
{info:'3', time:2000},
{info:'4', time:2000},
{info:'5', time:3000},
{info:'6', time:1000},
{info:'7', time:2000},
{info:'8', time:2000},
{info:'9', time:3000},
{info:'10', time:1000}
]
function loadImg(url){
return new Promise((reslove, reject)=>{
console.log(url.info + '---start')
setTimeout(()=>{
console.log(url.info, 'ok!!!')
reslove()
}, url.time)
})
}
limitLoad(urls, loadImg, 3)