任务中断和恢复

任务中断和恢复

实现

/**
 * 依次顺序执行一系列任务
 * 所有任务完成后可以得到每个任务的执行结果
 * 需要返回两个方法，start用于启动项目，pause用于终止任务
 * 每个任务具有原子性，即不可中断，只能在两个任务之间可以中断
 *  @param {...Function} tasks 任务列表 每个任务无参 且异步
 *
 */

function processTasks(tasks) {
  let isRunning = false;
  let result = [];
  let i = 0;
  return {
    start() {
      return new Promise(async (resolve) => {
        if (isRunning) {
          return;
        }

        isRunning = true;
        // 执行任务

        while (i < tasks.length) {
          const task = tasks.shift();
          const res = await task();
          result.push(res);
          i++;
          if (!isRunning) {
            return;
          }
        }

        // 任务完成
        isRunning = false;
        resolve(result);
      });
    },
    pause() {
      isRunning = false;
    },
  };
}

使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/任务队列的中断和恢复.js"></script>
  </head>
  <body>
    <button id="start">启动</button> <br />
    <button id="pause">暂停</button>

    <script>
      window.onload = function () {
        const tasks = [];
        for (let i = 0; i < 10; i++) {
          tasks.push(function () {
            console.log("任务" + (i + 1) + "执行中...");
            return new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve(i);
                console.log("任务" + (i + 1) + "执行完毕");
              }, 2000);
            });
          });
        }

        const start = document.getElementById("start");
        const pause = document.getElementById("pause");

        const processor = processTasks(tasks);
        start.onclick = async function () {
          console.log("开始执行任务");
          const res = await processor.start();
          console.log("所有任务执行完毕，结果为：", res);
        };

        pause.onclick = function () {
          console.log("暂停执行任务");
          processor.pause();
        };
      };
    </script>
  </body>
</html>

测试结果

任务中断和恢复结果