JavaScript中用Generator实现可中断长任务的核心是将耗时操作拆分为小步骤，通过yield主动交出控制权，配合next()与微任务调度实现暂停、恢复、取消等控制。
JavaScript 中用 Generator 实现可中断的长任务，核心是把耗时操作拆成多个小步骤，每次执行一小段后主动交出控制权，等下次被调用时再继续。这避免了阻塞主线程，也便于外部控制（如暂停、恢复、取消）。
用 yield 切割任务逻辑
Generator 函数通过 yield 暂停执行，并返回当前状态。你可以把一个长循环、大量计算或分批次的数据处理，按固定步数或时间片 yield 出去。
例如：遍历 10 万条数据做复杂计算，不一次性跑完，而是每处理 1000 条就 yield 一次：
function* longTask(data, batchSize = 1000) {
for (let i = 0; i < data.length; i += batchSize) {
const chunk = data.slice(i, i + batchSize);
// 执行该批次的计算
chunk.forEach(item => /* 耗时处理 */);
// 主动让出控制权，返回当前进度
yield { done: false, progress: Math.min(i + batchSize, data.length) / data.length };
}
yield { done: true, result: 'completed' };
}
配合 next() 和异步调度实现可控执行
不能直接 for...of 或全量展开，否则还是同步阻塞。需要用 next() 手动驱动，并在每次 yield 后插入微任务或定时调度，给浏览器留出响应时间。
立即学习“Java免费学习笔记（深入）”；
- 用 queueMicrotask 或 Promise.resolve().then 实现“下一帧继续”
- 用 setTimeout(..., 0) 更宽松地释放主线程（适合更重的任务）
- 封装一个 runner，支持暂停（stop）、恢复（resume）、取消（abort）
class TaskRunner {
constructor(genFn, ...args) {
this.iterator = genFn(...args);
this.isRunning = false;
this.isStopped = false;
}
<p>resume() {
if (this.isRunning || this.isStopped) return;
this.isRunning = true;
const step = () => {
const { value, done } = this.iterator.next();
if (done) {
this.isRunning = false;
return;
}
// 处理 value（如更新 UI 进度）
queueMicrotask(() => {
if (!this.isStopped) step();
});
};
step();
}</p><p>stop() {
this.isStopped = true;
this.isRunning = false;
}
}</p>结合 Promise 实现异步长任务（如分页请求）
Generator 本身不处理异步，但可以和 Promise 配合：yield 出 Promise，由 runner 等待其 resolve 后再 next。这适合“发一批请求 → 等响应 → 发下一批”的场景。
注意：需用额外的 runner 支持 yield Promise，原生 Generator 不自动 await。
function* apiBatchTask(urls) {
for (const url of urls) {
// yield 一个 Promise，runner 负责 await 它
yield fetch(url).then(r => r.json());
}
}
<p>// Runner 需判断 yield 值是否为 Promise 并 await
async function runGenerator(gen) {
let res = gen.next();
while (!res.done) {
if (res.value instanceof Promise) {
const data = await res.value;
res = gen.next(data);
} else {
res = gen.next();
}
}
}</p>实际使用中的关键细节
- 不要在 yield 后直接写复杂同步代码：哪怕只 yield 一次，后续仍可能卡顿；确保每次 yield 前的工作量可控（如限制循环次数、使用 requestIdleCallback 辅助）
- 状态要可序列化或可恢复：中断时保存当前索引、缓存中间结果，恢复时能接续，而不是从头开始
- UI 更新及时反馈：每次 yield 后建议更新进度条或状态文本，避免用户误以为卡死
- 考虑用 async/await + 可取消 Promise 替代：现代开发中，AbortController + async 函数往往更直观；Generator 方案更适合需要精确控制每一步、或需多次暂停/回退的特殊场景
