JS怎么实现异步任务队列

发布时间:2021-08-23 11:35:05 作者:chen
来源:亿速云 阅读:352

本篇内容主要讲解“JS怎么实现异步任务队列”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS怎么实现异步任务队列”吧!

问题

有个需求,需要实现一个异步任务队列,并依次处理队列中的所有任务,具体如下:

这个需求若使用Java语言的BlockingQueue很容易实现,但是JavaScript没有锁机制,实现起来就不那么容易。

方案一

很容易想到使用同步非阻塞方案,每隔一定的时间去检测一下队列中有无任务,有则取出第一个处理。这里检测间隔间隔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怎么实现异步任务队列

但是这个方案有2个问题。

那有没有像Java中BlockingQueue那样的队列空闲就阻塞,不消耗资源的处理方式呢?

方案二

主要思路:

<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)
  })
}

// 连续点击,触发异步请求,加入任务队列
function clickMe() {
  addQueue(() => request(index++))
}

// 当队列中任务数大于0时,开始处理队列中的任务
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怎么实现异步任务队列

结语

利用好Promise没有resolve会一直阻塞的特性,可以实现类似Java的BlockingQueue的功能,异步任务依次执行,且队列空闲也不消耗资源。

到此,相信大家对“JS怎么实现异步任务队列”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. Django Celery异步任务队列的实现
  2. Node.js中怎么实现异步处理

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js

上一篇:如何实现python函数的万能参数传参

下一篇:pytorch中网络loss传播和参数更新的示例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》