Generator函数通过function*和yield实现可暂停长任务，将大任务拆分为小片交由requestIdleCallback在浏览器空闲时执行，避免阻塞主线程；可封装为支持启动、恢复、暂停、取消的Task类，注意yield本身不同步，异步操作需配合Promise或Async Generator。
Generator 函数通过 function* 定义，配合 yield 可主动暂停执行，并由调用方控制恢复时机——这正是实现“可暂停长任务”的核心机制。关键不在于让单个任务变快，而是把大任务拆成小片，在浏览器空闲时逐步执行，避免阻塞主线程。
用 yield 拆解长循环任务
把原本可能卡住 UI 的密集计算（如遍历百万级数组、复杂数据处理）改写为 Generator，每次 yield 返回一个中间结果或进度，交还控制权。
例如：模拟耗时的数据过滤任务
function* filterLargeArray(arr, predicate) {
for (let i = 0; i < arr.length; i++) {
if (predicate(arr[i])) {
yield arr[i]; // 每匹配一个就暂停，等下次 next()
}
}
}
<p>// 使用：手动调度，每次只处理一部分
const data = Array.from({ length: 100000 }, (_, i) => i);
const gen = filterLargeArray(data, x => x % 100 === 0);</p><p>// 每次调用 next() 处理一个匹配项，UI 仍可响应
function scheduleNext() {
const { value, done } = gen.next();
if (!done) {
console.log('找到:', value);
// 延迟下一次，留出渲染时间
setTimeout(scheduleNext, 0);
}
}
scheduleNext();
结合 requestIdleCallback 实现智能节流
比起固定 setTimeout(0)，更推荐用 requestIdleCallback 让浏览器在空闲帧自动调度，真正实现“不抢资源”。
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- Generator 提供任务切片逻辑，
requestIdleCallback提供执行时机 - 利用
deadline.timeRemaining()判断是否还能继续执行 - 未完成时递归调用自身，保持调度链
function runGeneratorIdle(gen, callback = () => {}) {
function work(deadline) {
let result;
do {
result = gen.next();
if (result.done) {
callback(result.value);
return;
}
} while (deadline.timeRemaining() > 1); // 留至少 1ms 给浏览器
<pre class="brush:php;toolbar:false;">requestIdleCallback(work, { timeout: 1000 });} requestIdleCallback(work, { timeout: 1000 }); }
// 启动 runGeneratorIdle( filterLargeArray(largeData, x => x > 50000), (finalResult) => console.log('全部完成:', finalResult) );
封装成可取消、可恢复的 Task 类
实际项目中，常需暂停、恢复、取消长任务。可基于 Generator 封装一个状态可控的 Task：
- 内部保存
generator实例和当前iterator -
start()触发首次执行；resume()继续；pause()保存状态 -
cancel()调用generator.return()清理资源
class Task {
constructor(generatorFn, ...args) {
this.gen = generatorFn(...args);
this.iterator = null;
}
<p>start() {
this.iterator = this.gen;
return this.resume();
}</p><p>resume() {
if (!this.iterator) return Promise.resolve();
const result = this.iterator.next();
if (result.done) return Promise.resolve(result.value);
return Promise.resolve(result.value).then(() => this.resume());
}</p><p>pause() {
// 暂停即停止调用 next()，状态保留在 iterator 中
}</p><p>cancel() {
if (this.iterator?.return) {
this.iterator.return();
}
}
}</p><p>// 使用
const task = new Task(function<em> (arr) {
for (const item of arr) {
yield new Promise(r => setTimeout(r, 0)); // 模拟异步等待点
yield item </em> 2;
}
}, [1, 2, 3, 4]);</p><p>task.start().then(console.log); // [2,4,6,8]
注意边界：yield 不是异步，但可配合 Promise
yield 本身不处理异步，它只是暂停函数执行并返回值。若任务中包含异步操作（如 fetch），需手动 yield Promise 并在外部 await 或 then 恢复：
- 不要直接
yield fetch(...)—— 这只会 yield Promise 对象，不会等待 - 正确做法：用
async function*（Async Generator），或在外层包装await调用逻辑 - 常见错误：混淆 Generator 和 async/await；前者是协作式暂停，后者是语法糖包装 Promise 链
简单起见，多数调度场景用同步 Generator + requestIdleCallback 已足够；涉及真实异步 IO，优先考虑 async/await + AbortController。
