本篇內(nèi)容主要講解“JS怎么實(shí)現(xiàn)異步任務(wù)隊(duì)列”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“JS怎么實(shí)現(xiàn)異步任務(wù)隊(duì)列”吧!

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),柞水企業(yè)網(wǎng)站建設(shè),柞水品牌網(wǎng)站建設(shè),網(wǎng)站定制,柞水網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,柞水網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

問(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)求。

  點(diǎn)我

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í)，開(kāi)始處理隊(duì)列中的任務(wù)

• 待一個(gè)任務(wù)執(zhí)行完后再執(zhí)行下一個(gè)任務(wù)

• 隊(duì)列中任務(wù)全部處理完后標(biāo)志running狀態(tài)為false

點(diǎn)我

// 異步請(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í)，開(kāi)始處理隊(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)類(lèi)似Java的BlockingQueue的功能，異步任務(wù)依次執(zhí)行，且隊(duì)列空閑也不消耗資源。

到此，相信大家對(duì)“JS怎么實(shí)現(xiàn)異步任務(wù)隊(duì)列”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！