给你n个异步任务队列，如何实现挂起和恢复，并且执行完后一起返回结果？

guo煊

已于 2024-04-05 20:55:55 修改

阅读量85

点赞数 2

文章标签： javascript 前端 vue.js

于 2024-04-05 20:45:46 首次发布

本文链接：https://blog.csdn.net/weixin_50165941/article/details/137408882

版权

废话不说，以下便是实现代码，当然有很多不完善的地方，只是提供一个简单的思路

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      div {
        width: 200px;
        display: flex;
        justify-content: space-between;
        margin: 100px auto;
      }
    </style>
  </head>
  <body>
    <div>
      <button onclick="start()">开始</button>
      <button onclick="suspend()">暂停</button>
      <button onclick="resume()">继续</button>
    </div>
  </body>
  <script>
    function createTasks(num) {
      const tasks = [];
      for (let i = 0; i < num; i++) {
        tasks.push(
          () =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve(i);
              }, 1500);
            })
        );
      }
      return tasks;
    }
    const process = Process();

    async function start() {
      const tasks = createTasks(10); //创建10个异步任务
      let result = await process.run(tasks);
      console.log("全部任务完成", result);
    }
    function suspend() {
      process.suspend();
    }
    function resume() {
      process.resume();
    }

    function Process() {
      let _resolve,
        _reject,
        currIndex = 0,
        _results = [],
        _tasks = null,
        _running = false;
      async function _start() {
        for (; currIndex < _tasks.length; currIndex++) {
          if (!_running) {
            return;
          }
          let rs = await _tasks[currIndex]();
          console.log(`完成了第${currIndex}个任务，结果是${rs}`);
          _results.push(rs);
        }
        _resolve(_results);
      }
      return {
        run(tasks) {
          if (!tasks) return;
          console.log("开始执行");
          return new Promise((resolve, reject) => {
            _resolve = resolve; //缓存resolve
            _reject = reject; //缓存reject, reject的情况未考虑
            _running = true;
            _tasks = tasks;
            _start();
          });
        },
        suspend() {
          console.log("挂起任务");
          _running = false;
        },
        resume() {
          console.log("重启任务");
          _running = true;
          _start();
        },
      };
    }
  </script>
</html>