JavaScript队列函数和异步执行详解


Posted in Javascript onJune 19, 2017

编辑注:在Review别人的JavaScript代码时曾看到过类似的队列函数,不太理解,原来这个是为了保证函数按顺序调用。读了这篇文章之后,发现还可以用在异步执行等。

假设你有几个函数fn1、fn2和fn3需要按顺序调用,最简单的方式当然是:

fn1();
fn2();
fn3();

但有时候这些函数是运行时一个个添加进来的,调用的时候并不知道都有些什么函数;这个时候可以预先定义一个数组,添加函数的时候把函数push 进去,需要的时候从数组中按顺序一个个取出来,依次调用:

var stack = [];
// 执行其他操作,定义fn1
stack.push(fn1);
// 执行其他操作,定义fn2、fn3
stack.push(fn2, fn3);
// 调用的时候
stack.forEach(function(fn) { fn() });

 这样函数有没名字也不重要,直接把匿名函数传进去也可以。来测试一下:

var stack = [];
function fn1() {
  console.log('第一个调用');
}
stack.push(fn1);

function fn2() {
  console.log('第二个调用');
}
stack.push(fn2, function() { console.log('第三个调用') });

stack.forEach(function(fn) { fn() }); // 按顺序输出'第一个调用'、'第二个调用'、'第三个调用'

这个实现目前为止工作正常,但我们忽略了一个情况,就是异步函数的调用。异步是JavaScript 中无法避免的一个话题,这里不打算探讨JavaScript 中有关异步的各种术语和概念,请读者自行查阅(例如某篇著名的评注)。如果你知道下面代码会输出1、3、2,那请继续往下看:

console.log(1);

setTimeout(function() {
  console.log(2);
}, 0);

console.log(3);

假如stack 队列中有某个函数是类似的异步函数,我们的实现就乱套了:

var stack = [];

function fn1() { console.log('第一个调用') };
stack.push(fn1);

function fn2() {
  setTimeout(function fn2Timeout() {
     console.log('第二个调用');
  }, 0);
}
stack.push(fn2, function() { console.log('第三个调用') });

stack.forEach(function(fn) { fn() }); // 输出'第一个调用'、'第三个调用'、'第二个调用'

 问题很明显,fn2确实按顺序调用了,但setTimeout里的function fn2Timeout() { console.log(‘第二个调用') }却不是立即执行的(即使把timeout 设为0);fn2调用之后马上返回,接着执行fn3,fn3执行完了然才真正轮到fn2Timeout。

怎么解决?我们分析下,这里的关键在于fn2Timeout,我们必须等到它真正执行完才调用fn3,理想情况下大概像这样:

function fn2() {
  setTimeout(function() {
    fn2Timeout();
    fn3();
  }, 0);
}

但这样做相当于把原来的fn2Timeout整个拿掉换成一个新函数,再把原来的fn2Timeout和fn3插进去。这种动态改掉原函数的写法有个专门的名词叫Monkey Patch。按我们程序员的口头禅:“做肯定是能做”,但写起来有点拧巴,而且容易把自己绕进去。有没更好的做法?
我们退一步,不强求等fn2Timeout完全执行完才去执行fn3,而是在fn2Timeout函数体的最后一行去调用:

function fn2() {
  setTimeout(function fn2Timeout() {
    console.log('第二个调用');
    fn3();    // 注{1}
  }, 0);
}

这样看起来好了点,不过定义fn2的时候都还没有fn3,这fn3哪来的?

还有一个问题,fn2里既然要调用fn3,那我们就不能通过stack.forEach去调用fn3了,否则fn3会重复调用两次。

我们不能把fn3写死在fn2里。相反,我们只需要在fn2Timeout末尾里找出stack中fn2的下一个函数,再调用:

function fn2() {
  setTimeout(function fn2Timeout() {
    console.log('第二个调用');
    next();
  }, 0);
}

这个next函数负责找出stack 中的下一个函数并执行。我们现在来实现next:

var index = 0;

function next() {
  var fn = stack[index];
  index = index + 1; // 其实也可以用shift 把fn 拿出来
  if (typeof fn === 'function') fn();
}

next通过stack[index]去获取stack中的函数,每调用next一次index会加1,从而达到取出下一个函数的目的。
next这样使用:

var stack = [];

// 定义index 和next

function fn1() {
  console.log('第一个调用');
  next(); // stack 中每一个函数都必须调用`next`
};
stack.push(fn1);

function fn2() {
  setTimeout(function fn2Timeout() {
     console.log('第二个调用');
     next(); // 调用`next`
  }, 0);
}
stack.push(fn2, function() {
  console.log('第三个调用');
  next(); // 最后一个可以不调用,调用也没用。
});

next(); // 调用next,最终按顺序输出'第一个调用'、'第二个调用'、'第三个调用'。

现在stack.forEach一行已经删掉了,我们自行调用一次next,next会找出stack中的第一个函数fn1执行,fn1 里调用next,去找出下一个函数fn2并执行,fn2里再调用next,依此类推。
每一个函数里都必须调用next,如果某个函数里不写,执行完该函数后程序就会直接结束,没有任何机制继续。

了解了函数队列的这个实现后,你应该可以解决下面这道面试题了:

// 实现一个LazyMan,可以按照以下方式调用:
LazyMan(“Hank”)
/* 输出: 
Hi! This is Hank!
*/

LazyMan(“Hank”).sleep(10).eat(“dinner”)输出
/* 输出: 
Hi! This is Hank!
// 等待10秒..
Wake up after 10
Eat dinner~
*/

LazyMan(“Hank”).eat(“dinner”).eat(“supper”)
/* 输出: 
Hi This is Hank!
Eat dinner~
Eat supper~
*/

LazyMan(“Hank”).sleepFirst(5).eat(“supper”)
/* 等待5秒,输出
Wake up after 5
Hi This is Hank!
Eat supper
*/

// 以此类推。

Node.js 中大名鼎鼎的connect框架正是这样实现中间件队列的。有兴趣可以去看看它的源码或者这篇解读《何为 connect 中间件》。

细心的你可能看出来,这个next暂时只能放在函数的末尾,如果放在中间,原来的问题还会出现:

function fn() {
  console.log(1);
  next();
  console.log(2); // next()如果调用了异步函数,console.log(2)就会先执行
}

redux 和koa 通过不同的实现,可以让next放在函数中间,执行完后面的函数再折回来执行next下面的代码,非常巧妙。有空再写写。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js URL参数的拼接方法比较
Feb 15 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 #Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 #Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 #Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 #Javascript
jQuery 实现双击编辑表格功能
Jun 19 #jQuery
Web制作验证码功能实例代码
Jun 19 #Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 #Javascript
You might like
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
什么情况下可以不写PHP的闭合标签“?>”
2014/08/28 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
PHP进程通信基础之信号
2017/02/19 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
对numpy中shape的深入理解
2018/06/15 Python
python学生信息管理系统(初级版)
2018/10/17 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Django视图扩展类知识点详解
2019/10/25 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
介绍一下EJB的体系结构
2012/08/01 面试题
个人找工作求职简历的自我评价
2013/10/20 职场文书
物业品质提升方案
2014/06/08 职场文书
贷款委托书
2014/08/01 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
主持人开场白台词
2015/05/29 职场文书
杨善洲电影观后感
2015/06/04 职场文书
小英雄雨来观后感
2015/06/09 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书