探究一道价值25k的蚂蚁金服异步串行面试题


Posted in Javascript onAugust 21, 2020

前言

朋友去面试蚂蚁金服,遇到了一道面试题,乍一看感觉挺简单的,但是实现起来发现内部值得一提的点还是挺多的。

先看题目:

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");
});

// 需要按照 a,b,延迟1秒,c,延迟1秒,d,e, done 的顺序打印

按照上面的测试用例,实现 createFlow:

  • flow 是指一系列 effects 组成的逻辑片段。
  • flow 支持嵌套。
  • effects 的执行只需要支持串行。

分析

先以入参分析,createFlow 接受一个数组作为参数(按照题意里面的每一项应该叫做 effect),排除掉一些重复的项,我们把参数数组中的每一项整理归类一下,总共有如下几种类型:

普通函数:

() => log("a");

延迟函数(Promise):

() => delay(1000).then(() => log("d"));

另一个 flow:

const subFlow = createFlow([() => delay(1000).then(() => log("c"))]);

用数组包裹的上述三项。

实现

先把参数浅拷贝一份(编写库函数,尽量不要影响用户传入的参数是个原则),再简单的扁平化 flat 一下。(处理情况 4)

function createFlow(effects = []) {
 let sources = effects.slice().flat();
}

观察题意,createFlow 并不会让方法开始执行,需要 .run() 之后才会开始执行,所以先定义好这个函数:

function createFlow(effects = []) {
 let sources = effects.slice().flat();
 function run(callback) {
  while (sources.length) {
   const task = sources.shift();
  }
  callback?.();
 }
}

这里我选择用 while 循环依次处理数组中的每个 effect,便于随时中断。

对于函数类型的 effect,直接执行它:

function createFlow(effects = []) {
 let sources = effects.slice().flat();
 function run(callback) {
  while (sources.length) {
   const task = sources.shift();
   if (typeof task === "function") {
    const res = task();
   }
  }
  // 在所有任务执行完毕后 执行传入的回调函数
  callback?.();
 }

 return {
  run,
  isFlow: true,
 };
}

这里拿到了函数的返回值 res,有一个情况别忘了,就是 effect 返回的是一个 Promise,比如这种情况:

() => delay(1000).then(() => log("d"));

那么拿到返回值后,这里直接简化判断,看返回值是否有 then 属性来判断它是否是一个 Promise(生产环境请选择更加严谨的方法)。

if (res?.then) {
 res.then(createFlow(sources).run);
 return;
}

这里我选择中断本次的 flow 执行,并且用剩下的 sources 去建立一个新的 flow,并且在上一个 Promise 的 then 方法里再去异步的开启新的 flow 的 run。

这样,上面延迟 1s 后的 Promise 被 resolve 之后,剩下的 sources 任务数组会被新的 flow.run() 驱动,继续执行。
接下来再处理 effect 是另一个 flow 的情况,注意上面编写的大致函数体,我们已经让 createFlow 这个函数返回值带上 isFlow

这个标记,用来判断它是否是一个 flow。

// 把callback放到下一个flow的callback时机里执行
const next = () => createFlow(sources).run(callback)
if (typeof task === "function") {
 const res = task();
 if (res?.then) {
  res.then(next);
  return;
 }
} else if (task?.isFlow) {
 task.run(next);
 return;
}

看 else if 的部分,直接调用传入的 flow 的 run,把剩下的 sources 创建的新的 flow,并且把这一轮的 callback 放入到新的 flow 的 callback 位置。在所有的任务都结束后再执行。

定义一个 next 方法,用来在遇到异步任务或者另一个 flow 的时候

这样,参数中传入的 flow 执行完毕后,才会继续执行剩下的任务,并且在最后执行 callback。

完整代码

function createFlow(effects = []) {
 let sources = effects.slice().flat();
 function run(callback) {
  while (sources.length) {
   const task = sources.shift();
   // 把callback放到下一个flow的callback时机里执行
   const next = () => createFlow(sources).run(callback)
   if (typeof task === "function") {
    const res = task();
    if (res?.then) {
     res.then(next);
     return;
    }
   } else if (task?.isFlow) {
    task.run(next);
    return;
   }
  }
  callback?.();
 }
 return {
  run,
  isFlow: true,
 };
}
const delay = () => new Promise((resolve) => setTimeout(resolve, 1000));
createFlow([
 () => console.log("a"),
 () => console.log("b"),
 createFlow([() => console.log("c")]),
 [() => delay().then(() => console.log("d")), () => console.log("e")],
]).run();

总结

这道面试题主要的目的是考察对于异步串行流的控制,巧妙的利用自身的递归设计来处理传入的参数也是一个 flow的情况,在编写题目的过程中展示你对 Promise 的熟练运用,一定会让面试官对你刮目相看的~

到此这篇关于探究一道价值25k的蚂蚁金服异步串行面试题的文章就介绍到这了,更多相关异步串行面试题内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
js实现页面导航层级指示效果
Aug 25 #Javascript
js实现拖拽元素选择和删除
Aug 25 #Javascript
基于vue实现简易打地鼠游戏
Aug 21 #Javascript
vue实现打地鼠小游戏
Aug 21 #Javascript
js实现滑动进度条效果
Aug 21 #Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 #Javascript
vue组件开发之tab切换组件使用详解
Aug 21 #Javascript
You might like
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
laravel入门知识点整理
2020/09/15 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
Angular实现响应式表单
2017/08/04 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
详解js中Array的方法及技巧
2018/09/12 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
Python import与from import使用及区别介绍
2018/09/06 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
毕业自荐信
2013/12/16 职场文书
毕业生自荐书
2014/02/02 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
小学数学课题方案
2014/06/15 职场文书
80后婚前协议书范本
2014/10/24 职场文书
开票员岗位职责
2015/02/12 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
五年级作文之成长
2019/09/16 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
python numpy中setdiff1d的用法说明
2021/04/22 Python
Python 全局空间和局部空间
2022/04/06 Python
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏