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 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
再谈javascript面向对象编程
Mar 18 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
简单实现js上传文件功能
Aug 21 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
React列表栏及购物车组件使用详解
Jun 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
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
Python实现方便使用的级联进度信息实例
2015/05/05 Python
python写日志封装类实例
2015/06/28 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
python3 mmh3安装及使用方法
2019/10/09 Python
python二维键值数组生成转json的例子
2019/12/06 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
医学生自荐信范文
2013/12/03 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript