JavaScript中实现可暂停、可恢复的Promise队列，关键在于将任务封装为返回Promise的函数而非立即执行Promise，再由队列控制器按需调用并管理运行、暂停、恢复状态。
JavaScript 中实现可暂停、可恢复的 Promise 队列，核心在于**不直接执行 Promise，而是封装其创建逻辑（即返回一个函数），再由队列控制器按需调用并管理状态**。原生 Promise 一旦创建就不可中断或暂停，所以必须在“调度层”做控制，而非改造 Promise 本身。
用函数包裹 Promise 构造逻辑
每个任务应是一个返回 Promise 的函数（即 () => Promise），而不是已执行的 Promise。这样队列才能决定何时真正触发它：
- ✅ 正确：
queue.push(() => fetch('/api/data')) - ❌ 错误：
queue.push(fetch('/api/data'))（立即执行，无法暂停）
设计带状态的队列控制器
创建一个类（如 PausableQueue），内部维护：
– 待执行的任务数组（函数列表）
– 当前运行状态（running）、暂停标志（paused）、是否正在处理中（busy）
– 使用 async/await 顺序消费，每次只启动一个任务，并在前后检查暂停状态：
class PausableQueue {
constructor() {
this.tasks = [];
this.paused = false;
this.running = false;
this.busy = false;
}
push(taskFn) {
this.tasks.push(taskFn);
this.start();
}
start() {
if (this.running || this.busy) return;
this.running = true;
this.next();
}
pause() {
this.paused = true;
}
resume() {
this.paused = false;
this.next(); // 继续下一个
}
async next() {
if (this.paused || this.tasks.length === 0) return;
this.busy = true;
const taskFn = this.tasks.shift();
try {
await taskFn();
} catch (e) {
console.error('Task failed:', e);
} finally {
this.busy = false;
// 自动继续，除非被暂停
if (!this.paused && this.tasks.length > 0) {
this.next();
} else if (this.tasks.length === 0) {
this.running = false;
}
}
}
}
支持外部中断与重入控制
若需更精细控制（如取消当前任务、清空队列、插入高优任务），可在控制器中扩展方法：
-
clear()：清空待执行队列 -
unshift(taskFn)：插入到队首（高优先级） -
cancelCurrent()：配合AbortController中断正在运行的 fetch 或 setTimeout 类任务（需任务函数内部支持）
注意：Promise 本身不可取消，但像 fetch、setTimeout、WebSocket 等底层操作可通过信号（AbortSignal）响应取消 —— 所以任务函数应接收 signal 并主动监听：
立即学习“Java免费学习笔记（深入）”；
queue.push(({ signal }) =>
fetch('/api/data', { signal })
);
实际使用示例
启动队列后，随时暂停/恢复：
const q = new PausableQueue();
q.push(() => delay(1000).then(() => console.log('1')));
q.push(() => delay(1000).then(() => console.log('2')));
q.push(() => delay(1000).then(() => console.log('3')));
// 运行 1 秒后暂停
setTimeout(() => q.pause(), 1000);
// 2 秒后恢复
setTimeout(() => q.resume(), 3000);
不复杂但容易忽略：关键不在 Promise 本身，而在把“执行时机”从创建时转移到调度时。只要任务是延迟求值的函数，暂停、跳过、重试、注入都变得自然可行。
