任务队列的中断与恢复

2023-07-24 22:35:41

所有任务全部完成后可以得到每个任务的执行结果
返回两个方法，一个开始任务，一个暂停任务
每个任务具有原子性，即任务不可中断，只可以在两个任务之间中断

function processTasks(tasks) {
  // write your code
}

控制台查看效果

<script setup>
function processTasks(tasks) {
  const result = []
  let isRunning = false
  // 记录当前执行到第几个任务 闭包 暂停后继续执行
  let i = 0

  return {
    async start() {
      // 外面包裹一层promise
      // 手动控制 只有当所有任务执行完毕再resolve返回结果
      return new Promise(async (resolve, reject) => {
        // 如果任务正在执行，再次调用start 则直接返回
        if (isRunning) {
          return
        }
        isRunning = true
        // 依次执行任务
        while (i < tasks.length) {
          console.log(`第${i + 1}个任务开始执行`)
          result.push(await tasks[i]())
          console.log(`第${i + 1}个任务执行完毕`)
          i++
          // 如果任务执行过程中被暂停，则返回
          if (!isRunning) {
            return
          }
        }
        // 所有任务执行完毕
        isRunning = false
        console.log('所有任务执行完毕')
        resolve(result)
      })
    },
    pause() {
      console.log('任务暂停')
      isRunning = false
    }
  }
}

// 塞一些异步任务
const tasks = []
for (let i = 0; i < 10; i++) {
  tasks.push(() => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(i)
      }, 1000)
    })
  })
}

const processor = processTasks(tasks)
</script>
<template>
  <div mb="10">控制台查看效果</div>
  <div flex gap-10>
    <button
      border="1px solid"
      py="1"
      px="2"
      rounded
      @click="() => processor.start()"
    >
      任务开始
    </button>
    <button
      border="1px solid"
      p="1"
      px="2"
      rounded
      @click="() => processor.pause()"
    >
      任务暂停
    </button>
  </div>
</template>

任务队列的中断与恢复 ​

任务队列的中断与恢复