探究一道价值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 相关文章推荐
JavaScript效率调优经验
Jun 04 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
详解Vue中watch的高级用法
May 02 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
vue 插槽简介及使用示例
Nov 19 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python Requests库基本用法示例
2018/08/20 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
django中嵌套的try-except实例
2020/05/21 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
母婴店促销方案
2014/03/05 职场文书
五一劳动节活动记录
2014/03/23 职场文书
营销经理工作检讨书
2014/11/03 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
instantclient客户端 连接oracle数据库
2022/04/26 Oracle