站長(zhǎng)資訊網(wǎng)使用JavaScript怎么實(shí)現(xiàn)一個(gè)異步任務(wù)隊(duì)列，并依次處理隊(duì)列中的所有任務(wù)？本篇文章給大家介紹一下JavaScript 阻塞方式實(shí)現(xiàn)異步任務(wù)隊(duì)列的方法。
問(wèn)題
有個(gè)需求，需要實(shí)現(xiàn)一個(gè)異步任務(wù)隊(duì)列，并依次處理隊(duì)列中的所有任務(wù)，具體如下：
-
隨機(jī)時(shí)間增加異步任務(wù)到隊(duì)列中
-
隊(duì)列中的任務(wù)按照先進(jìn)先出的規(guī)則依次執(zhí)行
-
任務(wù)為異步請(qǐng)求，等一個(gè)執(zhí)行完了再執(zhí)行下一個(gè)
這個(gè)需求若使用Java語(yǔ)言的BlockingQueue很容易實(shí)現(xiàn)，但是JavaScript沒(méi)有鎖機(jī)制，實(shí)現(xiàn)起來(lái)就不那么容易。
方案一
很容易想到使用同步非阻塞方案，每隔一定的時(shí)間去檢測(cè)一下隊(duì)列中有無(wú)任務(wù)，有則取出第一個(gè)處理。這里檢測(cè)間隔間隔500毫秒，使用setTimeout模擬異步請(qǐng)求。
<body> <button onclick="clickMe()">點(diǎn)我</button> </body>
let queue = [] let index = 0 function clickMe() { queue.push({name: 'click', index: index++}) } run() async function run() { while (true) { if (queue.length > 0) { let obj = queue.shift() let res = await request(obj.index) console.log('已處理事件' + res) } else { await wait(500) console.log('----- 隊(duì)列空閑中 -----') } } } // 通過(guò)setTimeout模擬異步請(qǐng)求 function request(index) { return new Promise(function (resolve, reject) { setTimeout(() => { resolve(index) }, 1000) }) } function wait(time) { return new Promise(function (resolve) { setTimeout(() => { resolve() }, time) }) }
但是這個(gè)方案有2個(gè)問(wèn)題。
- 隊(duì)列空閑仍在循環(huán)處理，消耗資源
- 檢測(cè)間隔時(shí)間難把握，若間隔時(shí)間過(guò)大導(dǎo)致隊(duì)列任務(wù)處理不完，檢測(cè)間隔時(shí)間過(guò)小消耗資源
那有沒(méi)有像Java中BlockingQueue那樣的隊(duì)列空閑就阻塞，不消耗資源的處理方式呢？
方案二
主要思路：
- 將異步請(qǐng)求加入隊(duì)列中，當(dāng)隊(duì)列中任務(wù)數(shù)大于0時(shí)，開始處理隊(duì)列中的任務(wù)
- 待一個(gè)任務(wù)執(zhí)行完后再執(zhí)行下一個(gè)任務(wù)
- 隊(duì)列中任務(wù)全部處理完后標(biāo)志running狀態(tài)為false
<body> <button onclick="clickMe()">點(diǎn)我</button> </body>
// 異步請(qǐng)求隊(duì)列 const queue = [] // 用來(lái)模擬不同的返回值 let index = 0 // 標(biāo)志是否正在處理隊(duì)列中的請(qǐng)求 let running = false // 使用setTimeout模擬異步請(qǐng)求 function request(index) { return new Promise(function (resolve) { setTimeout(() => { resolve(index) }, 1000) }) } // 連續(xù)點(diǎn)擊，觸發(fā)異步請(qǐng)求，加入任務(wù)隊(duì)列 function clickMe() { addQueue(() => request(index++)) } // 當(dāng)隊(duì)列中任務(wù)數(shù)大于0時(shí)，開始處理隊(duì)列中的任務(wù) function addQueue(item) { queue.push(item) if (queue.length > 0 && !running) { running = true process() } } function process() { const item = queue.shift() if (item) { item().then(res => { console.log('已處理事件' + res) process() }) } else { running = false } }
結(jié)語(yǔ)
利用好Promise沒(méi)有resolve會(huì)一直阻塞的特性，可以實(shí)現(xiàn)類似Java的BlockingQueue的功能，異步任務(wù)依次執(zhí)行，且隊(duì)列空閑也不消耗資源。
