溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS怎么實現(xiàn)異步任務(wù)隊列

發(fā)布時間：2021-08-23 11:35:05 來源：億速云 閱讀：347 作者：chen 欄目：web開發(fā)

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

問題

有個需求，需要實現(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)
  })
}

JS怎么實現(xiàn)異步任務(wù)隊列

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

  • 隊列空閑仍在循環(huán)處理，消耗資源

  • 檢測間隔時間難把握，若間隔時間過大導(dǎo)致隊列任務(wù)處理不完，檢測間隔時間過小消耗資源

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

方案二

主要思路：

  • 將異步請求加入隊列中，當(dāng)隊列中任務(wù)數(shù)大于0時，開始處理隊列中的任務(wù)

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

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

<body>
<button onclick="clickMe()">點我</button>
</body>
// 異步請求隊列
const queue = []
// 用來模擬不同的返回值
let index = 0
// 標志是否正在處理隊列中的請求
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
  }
}

JS怎么實現(xiàn)異步任務(wù)隊列

結(jié)語

利用好Promise沒有resolve會一直阻塞的特性，可以實現(xiàn)類似Java的BlockingQueue的功能，異步任務(wù)依次執(zhí)行，且隊列空閑也不消耗資源。

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

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手