JavaScript 阻塞方式實(shí)現(xiàn)異步任務(wù)隊(duì)列

更新時(shí)間：2024年05月15日 10:58:59 作者：milugloomy

本文主要介紹了JavaScript 阻塞方式實(shí)現(xiàn)異步任務(wù)隊(duì)列,主要介紹了兩種方案,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

到此這篇關(guān)于JavaScript 阻塞方式實(shí)現(xiàn)異步任務(wù)隊(duì)列的文章就介紹到這了,更多相關(guān)JavaScript 異步隊(duì)列內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: