Comments (4)
或许更好的解决方案:
- 使用 async await 控制串行
- 使用生成器将嵌套结构的 flow 展平为 effects 迭代器
from blogs.
贡献一种写法,用了一个辅助类来拉平数组。
function Helper(val) {
this.val = val;
}
Helper.prototype.run = function () {
const next = (i = 0) => {
if (i === this.val.length) return;
const fn = this.val[i]();
fn instanceof Promise
? fn.then(next.bind(null, i + 1))
: next(i + 1);
}
next();
}
const createFlow = (arr) => {
const loop = (innerArr) => {
let innerFns = [];
innerArr.forEach((el) => {
if (Array.isArray(el)) {
innerFns = innerFns.concat(loop(el));
} else if (el instanceof Helper) {
innerFns = innerFns.concat(el.val);
} else {
innerFns.push(el);
}
})
return innerFns;
}
return new Helper(loop(arr))
}
from blogs.
或许更好的解决方案:
- 使用 async await 控制串行
- 使用生成器将嵌套结构的 flow 展平为 effects 迭代器
是的 async 一定是更简洁的 也许是我想怀旧一下了 XD
from blogs.
function Flow(effects = []) {
this.tasks = effects.reduce((result, effect) => {
if(effect instanceof Flow) {
result.push(...effect.tasks);
} else if(Array.isArray(effect)) {
result.push(...effect);
} else {
result.push(effect);
}
return result;
}, []);
}
Flow.prototype.run = function(callback) {
return new Promise(async (resolve) => {
for(let i = 0;i<this.tasks.length;i++) {
const task = this.tasks[i];
await task();
}
callback();
});
}
function createFlow(effects) {
return new Flow(effects);
}
const log = console.log;
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const subFlow = createFlow([() => delay(1000).then(() => log("c"))]);
createFlow([
() => log("a"),
() => log("b"),
subFlow,
[() => delay(1000).then(() => log("d")), () => log("e")],
]).run(() => {
console.log("done");
});
from blogs.
Related Issues (20)
- Hi
- Dan Abramov 接受油管 UP 主的面试挑战,结果差点没写出来居中……? HOT 3
- 【开源自荐】推荐一个每日更新的前端面试题库
- Vuex 4.0 正式发布!新年官方生态齐聚一堂
- 尤雨溪:关于 Vue3 和生活,想和前端们聊聊这些
- 浅谈 Vite 2.0 原理,依赖预编译,插件机制是如何兼容 Rollup 的? HOT 1
- TypeScript 中你不一定知道的 top types,在用 any 之前先试试 unknown?
- 给 Antd Table 组件编写缩进指引线、子节点懒加载等功能
- 如何编写神奇的「插件机制」,优化基于 Antd Table 封装表格的混乱代码
- 打破 React Hook 必须按顺序、不能在条件语句中调用的枷锁 HOT 2
- VueConf 2021 抢先看,Evan You 和你聊聊 Vue 的未来
- [RFC] 关于 Vue 3 的 IE11 支持
- 这个写法有问题,cd之间不会相隔1s执行
- Vite 太快了,烦死了,是时候该小睡一会了。
- 我的学习方法是每天看 10 个 NPM 模块? HOT 8
- 如何在大型代码仓库中删掉 6w 行废弃的文件和 exports? HOT 2
- 未来前端构建工具链的故事里,会有这个 97 年的韩国小哥?
- 想进字节跳动的新生代前端民工们,都提出了什么问题?
- 应用性能前端监控,字节跳动这些年经验都在这了
- Nuxt 3 来了!
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blogs.