虽然，这份「拆分后」的代码并不能跑起来，因为它只是实现了拆分步调，要让它跑起来，我们要上下面的第二段代码
4.2 分派每一帧的一些时间去执行在看一次我们适才的图
Framing Load
共同图，得出的代码
/** * 实现分帧加载 */ async framingLoad(length: number) { await this.executePreFrame(this._getItemGenerator(length), 1); } /** * 分帧执行 Generator 逻辑 * * @param generator 生成器 * @param duration 一连时间（ms） * 每次执行 Generator 的操纵时，最长可一连执行时长。 * 假设值为8ms，那么暗示1帧（总共16ms）下，分出8ms时间给此逻辑执行 */ private executePreFrame(generator: Generator, duration: number) { return new Promise((resolve, reject) => { let gen = generator; // 建设执行函数 let execute = () => { // 执行之前，先记录开始时间戳 let startTime = new Date().getTime(); // 然后一直从 Generator 中获取已经拆分好的代码段出来执行 for (let iter = gen.next(); ; iter = gen.next()) { // 判定是否已经执行完所有 Generator 的小代码段 // 假如是的话，那么就暗示任务完成 if (iter == null || iter.done) { resolve(); return; } // 每执行完一段小代码段，都查抄一下是否 // 已经高出我们分派给本帧，这些小代码端的最大可执行时间 if (new Date().getTime() - startTime > duration) { // 假如高出了，那么本帧就不在执行，开按时器，让下一帧再执行 this.scheduleOnce(() => { execute(); }); return; } } }; // 运行执行函数 execute(); }); }
代码中已经附有大量注释，但照旧有几个点需要说明一下：
为了利便知道这些小任务是否已经都执行完了，我回收了Promise，当都完成了的时候，resolve 一下
每一个小代码段的执行时间大概不牢靠的，大概会超出占用我们的一些期望时间。好比我们期望每一帧分派1ms 去执行这些小代码段，假设前3段小代码段，每一段的执行时间假设为 0.2ms，0.5ms, 0.4ms，那么在我给出的这段代码中，是会执行完这3段小代码段，然后就终止本帧继承执行这些小代码段，因为这里的耗时已经是 1.1ms，比我设定的 1ms 已经多出了 0.1ms 。虽然你可以自行窜改代码，让这些执行严格凭据最大1ms去执行，以实现不超时执行（即不再执行第3个小段）
至此，我们必然水平上已经实现了「分帧加载」了~
本项目中所有图示、代码都在Github客栈中，假如需要运行验证，可直接拉下项目即可，不消本身手撸代码验证
👉👉https://github.com/zhitaocai/CocosCreator-ScrollVIewPlus👈👈
五、总结尽量我们标题是 「ScrollView 优化系列」，但我越发倾向于，「操作分帧加载去优化ScrollView」。在这篇文章上，我们举的例子是建设节点，可是我决心不说「分帧建设」，这是因为我认为 「分帧加载」是一种机能优化方案 ，可以「分帧建设」、「分帧运行」、「分帧计较」、「分帧渲染」等。
在实现分帧上，我们用到了 this.scheduleOnce函数，可是其实可以实验在 update(dt:number) 上执行，不妨实验修改我的 「测试项目」去验证呢~
TypeScript 要用上 Generator 还需要需改一下Cocos项目中的 tsconfig.json：compilerOptions.lib 数组中添加 es2015
以上就是CocosCreator ScrollView优化系列之分帧加载的具体内容，更多关于CocosCreator ScrollView优化分帧加载的资料，请存眷剧本之家其它相关文章！
您大概感乐趣的文章: