<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="start()">开始任务</button>
<button onclick="pause()">暂停任务</button>
<script>
// 定义一些异步任务
let task = []
for (let i = 0; i < 5; i++) {
task.push(
() =>
new Promise((resolve) => {
setTimeout(() => {
resolve(i)
}, 2000)
})
)
}
function processTasks(...tasks) {
let isRunning = false // 控制中断
let i = 0 // 记录任务走到哪里了
const result = [] // 完成后的回调
let prom = null // 记录promise的状态
return {
start() {
return new Promise(async (resolve, reject) => {
if (prom) {
// prom有值说明要嘛是任务都成功，要嘛是出错了
// 最终结束任务
prom.then(resolve, reject)
return
}
if (isRunning) return // 防止重复点击
isRunning = true
while(i < tasks.length) {
try {
console.log(`第${i + 1}任务执行中`)
result.push(await tasks[i]())
console.log(`第${i + 1}任务执行结束`)
} catch (error) {
reject(error)
isRunning = false
prom = Promise.reject(error)
return
}
i++
if (!isRunning && i < tasks.length - 1) { // 最后一次不需要再循环了
console.log(`第${i + 1}任务执行中断`)
// 中断
return
}
}
// 成功
isRunning = false
resolve(result)
prom = Promise.resolve(result) // 成功后修改promise状态，防止再次点击时状态不对出错。
})
},
pause() {
isRunning = false
}
}
}
const process = processTasks(...task)
async function start() {
console.log('点击开始')
const result = await process.start()
console.log('任务完成', result)
}
function pause() {
console.log('点击结束')
process.pause()
}
</script>
</body>
</html>