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 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
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
用PHP和ACCESS写聊天室(六)
2006/10/09 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
php框架知识点的整理和补充
2021/03/01 PHP
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
node.js中watch机制详解
2014/11/17 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
Python的randrange()方法使用教程
2015/05/15 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
学习型班组申报材料
2014/05/31 职场文书
社团活动总结报告
2014/06/27 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
检讨书1000字
2014/10/11 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
基于Python实现对比Exce的工具
2022/04/07 Python
Windows7下FTP搭建图文教程
2022/08/05 Servers