JS 中怎么用 Generator 函数（生成器）实现可暂停的长任务调度-js教程-PHP中文网

Generator函数通过function*和yield实现可暂停长任务，将大任务拆分为小片交由requestIdleCallback在浏览器空闲时执行，避免阻塞主线程；可封装为支持启动、恢复、暂停、取消的Task类，注意yield本身不同步，异步操作需配合Promise或Async Generator。

js 中怎么用 generator 函数（生成器）实现可暂停的长任务调度

Generator 函数通过 function* 定义，配合 yield 可主动暂停执行，并由调用方控制恢复时机——这正是实现“可暂停长任务”的核心机制。关键不在于让单个任务变快，而是把大任务拆成小片，在浏览器空闲时逐步执行，避免阻塞主线程。

用 yield 拆解长循环任务

把原本可能卡住 UI 的密集计算（如遍历百万级数组、复杂数据处理）改写为 Generator，每次 yield 返回一个中间结果或进度，交还控制权。

例如：模拟耗时的数据过滤任务

function* filterLargeArray(arr, predicate) {
  for (let i = 0; i // 使用：手动调度，每次只处理一部分
const data = Array.from({ length: 100000 }, (_, i) => i);
const gen = filterLargeArray(data, x => x % 100 === 0);<p>// 每次调用 next() 处理一个匹配项，UI 仍可响应
function scheduleNext() {
const { value, done } = gen.next();
if (!done) {
console.log('找到:', value);
// 延迟下一次，留出渲染时间
setTimeout(scheduleNext, 0);
}
}
scheduleNext();
</p>

结合 requestIdleCallback 实现智能节流

比起固定 setTimeout(0)，更推荐用 requestIdleCallback 让浏览器在空闲帧自动调度，真正实现“不抢资源”。

dmap-jsapi-skill

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]
</p>