舉個栗子
當你找到一個免費接口夕凝，1分鐘限制調(diào)用次數(shù)10次的時候
當你有一個耗費大量前端資源多個任務(wù)同時執(zhí)行會導(dǎo)致內(nèi)存溢出的時候
大概意思就是我想讓這個任務(wù)排隊執(zhí)行茎杂，或者延遲執(zhí)行，又不想把邏輯寫到組件里
我想要的是摔竿，隨時可以把任務(wù)插進隊列真慢，隊列中的任務(wù)會等待前一個任務(wù)完成再執(zhí)行，任務(wù)完成后callback,還需要一個reject中斷任務(wù)
寫一個任務(wù)隊列
// 任務(wù)隊列
function Queue() {
this.queue = []
}
// 往隊列里增加一項任務(wù)
Queue.prototype.append = async function (getWork, callback) {
// 判斷這是否是隊列中的第一項
if (this.queue.length === 0) {
this.queue.push({ getWork, callback })
await this.go()
} else {
this.queue.push({ getWork, callback })
}
}
Queue.prototype.go = async function () {
if (this.queue.length !== 0) {
const { getWork, callback } = this.queue[0]
callback(await getWork())
this.queue.splice(0, 1)
await this.go()
}
}
Queue.prototype.reject = async function () {
this.queue = []
}
// 測試
let workQueue = new Queue()
for (let i = 1; i <= 10; i++) {
console.log(`第${i}個任務(wù)進入隊列,${Date.now()}`)
workQueue.append(() => new Promise(resolve => {
setTimeout(() => {
resolve(i)
}, 1000);
}), (data) => {
console.log(`第${data}個任務(wù)執(zhí)行完成,${Date.now()}`)
})
}
// setTimeout(() => {
// console.log('中斷')
// workQueue.reject()
// }, 5000);
測試一下
image.png
測試一下中斷
image.png
還是callback 第六次了??榕吼，湊合用把
