Javascript异步流程控制之串行执行详解


Posted in Javascript onSeptember 27, 2020

这篇文章主要讲一下如何串行执行一组异步任务,例如有下面几个任务,在这里我们用setTimeout模拟一个异步任务:

let taskA = () => setTimeout(() => console.log('run task A'), 100);
let taskB = () => setTimeout(() => console.log('run task B'), 50);
let taskC = () => setTimeout(() => console.log('run task C'), 150);

直接运行

taskA(); taskB(); taskC();

是达不到顺序执行A,B,C 的三个任务的效果的。

首先我们看一下最传统的做法,通过回调的方式在一个任务执行完成之后调用下一个任务:

let taskA = setTimeout(() => {
 console.log('run task A');
 taskB();
}, 100);
let taskB = setTimeout(() => {
 console.log('run task B');
 taskC();
}, 50);
let taskC = setTimeout(() => {
 console.log('run task B');
}, 150);

第二种方法是将每一个任务封装成一个返回Promise的函数, 然后使用使用Promise的链式调用达到串行执行的目的:

let taskA = () => new Promise((resolve, reject) => {
 setTimeout(() => {
  console.log('run task A');
  resolve();
 }, 100);
})
let taskB = () => new Promise((resolve, reject) => {
 setTimeout(() => {
  console.log('run task B');
  resolve();
 }, 50);
})
let taskC = () => new Promise((resolve, reject) => {
 setTimeout(() => {
  console.log('run task C');
  resolve();
 }, 150);
})
function runTasks2() {
  console.log('tasks 2');
  taskA().then(taskB).then(taskC);
}

假设任务的数量不确定,可以通过下面的方式来执行:

function runTasks3(tasks) {
  console.log('tasks 3');
  let pro = tasks[0]();
  for (let i = 1; i < tasks.length; i++) {
  pro.then(tasks[i]);
  }
}

借助于es7的async和await,我们还可以对上面的函数一种写法:

async function runTasks3_1(tasks) {
  for (let i = 0; i < tasks.length; i++) {
  await tasks[i]();
  }
}

在文章的最后我们自己来实现一个串行执行器, 用于执行一组串行任务:

function async(tasks) {
  const count = tasks.length;
  let index = 0;
  const next = () => {
   if (index >= count) return;
   const task = tasks[index++];
   task(next);
  }
  next(0);
}

函数的使用方式如下:

async([
   next => setTimeout(() => { console.log('taskA ...'); next() }, 100),
   next => setTimeout(() => { console.log('taskB ...'); next() }, 50),
   next => setTimeout(() => { console.log('taskC ...'); next() }, 30)
 ]);

在每一个子任务中我们通过调用next函数继续执行下一个子任务。

在具体的使用中可能会遇到函数之间传递参数的情况,即前一个任务的执行结果需要作为下一个任务的入参,这些都可以对上面的例子稍作修改就可以了~~

到此这篇关于Javascript异步流程控制之串行执行详解的文章就介绍到这了,更多相关Javascript串行执行内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
validator验证控件使用代码
Nov 23 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 #Javascript
Openlayers实现测量功能
Sep 25 #Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 #Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 #jQuery
Openlayers测量距离与面积的实现方法
Sep 25 #Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 #Javascript
OpenLayers3实现测量功能
Sep 25 #Javascript
You might like
JAVA/JSP学习系列之二
2006/10/09 PHP
深入PHP变量存储的详解
2013/06/13 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
深入理解JavaScript定时机制
2010/10/29 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
小学教师的自我评价范例
2013/10/31 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
战略合作协议书范本
2014/04/18 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
2016新年致辞
2015/08/01 职场文书
关于运动会的广播稿
2015/08/19 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
创业计划书之餐饮
2019/09/02 职场文书