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

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

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

問題

有個需求，需要實現(xiàn)一個異步任務(wù)隊列，并依次處理隊列中的所有任務(wù)，具體如下：

隨機時間增加異步任務(wù)到隊列中
隊列中的任務(wù)按照先進先出的規(guī)則依次執(zhí)行
任務(wù)為異步請求，等一個執(zhí)行完了再執(zhí)行下一個

這個需求若使用Java語言的BlockingQueue很容易實現(xiàn)，但是JavaScript沒有鎖機制，實現(xiàn)起來就不那么容易。

方案一

很容易想到使用同步非阻塞方案，每隔一定的時間去檢測一下隊列中有無任務(wù)，有則取出第一個處理。這里檢測間隔間隔500毫秒，使用setTimeout模擬異步請求。

<body>
  <button onclick="clickMe()">點我</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('----- 隊列空閑中 -----')
    }
  }
}
// 通過setTimeout模擬異步請求
function request(index) {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      resolve(index)
    }, 1000)
  })
}
function wait(time) {
  return new Promise(function (resolve) {
    setTimeout(() => {
      resolve()
    }, time)
  })
}

在這里插入圖片描述

但是這個方案有2個問題。

隊列空閑仍在循環(huán)處理，消耗資源
檢測間隔時間難把握，若間隔時間過大導(dǎo)致隊列任務(wù)處理不完，檢測間隔時間過小消耗資源

那有沒有像Java中BlockingQueue那樣的隊列空閑就阻塞，不消耗資源的處理方式呢？

方案二

主要思路：

將異步請求加入隊列中，當(dāng)隊列中任務(wù)數(shù)大于0時，開始處理隊列中的任務(wù)
待一個任務(wù)執(zhí)行完后再執(zhí)行下一個任務(wù)
隊列中任務(wù)全部處理完后標(biāo)志running狀態(tài)為false

<body>
<button onclick="clickMe()">點我</button>
</body>

// 異步請求隊列
const queue = []
// 用來模擬不同的返回值
let index = 0
// 標(biāo)志是否正在處理隊列中的請求
let running = false

// 使用setTimeout模擬異步請求
function request(index) {
  return new Promise(function (resolve) {
    setTimeout(() => {
      resolve(index)
    }, 1000)
  })
}

// 連續(xù)點擊，觸發(fā)異步請求，加入任務(wù)隊列
function clickMe() {
  addQueue(() => request(index++))
}

// 當(dāng)隊列中任務(wù)數(shù)大于0時，開始處理隊列中的任務(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
  }
}

在這里插入圖片描述