前言

以一个煮饭的例子开始,例如有三件事,A是买菜、B是买肉、C是洗米,最终的结果是为了煮一餐饭。为了最后一餐饭,可以三件事一起做,也可以轮流做,也可能C需要最后做(等A、B做完),这三件事是相关的,抽象起来有三种场景。

顺序做

先买菜,再买肉,最后洗米, 即 A->B->C。

并发做

买菜,买肉,洗米,一起做。

交集做

买菜,买肉必须先做完,才能做洗米。

场景就是这样,接下来就是如何考虑用js实现。

function A(callback){
   setTimeout(function(){
callback("买好菜了");
}, 1000);
}
function B(callback){
setTimeout(function(){
callback("买好肉了");
}, 2000);
}
function C(callback){
setTimeout(function(){
callback("洗米好了");
}, 3000);

普通做法(无任何模式)

顺序做

A(function(res){
console.log(res);
B(function(res){
console.log(res);
C(function(res){
console.log(res);
console.log("煮饭啦~~~");
});
});
});

这就是传说中的回调地狱,实际的场景嵌套的层级可能还更多。

并发做

var cook_count = 0;
A(function(res){
callback(res);
});
B(function(res){
callback(res);
});
C(function(res){
callback(res);
});
function callback(res){
console.log(res);
cook_count++;
if(cook_count == 3){
console.log("煮饭啦~~~");
}
}

设置一个计数器,记录事情发展,到计数到指定的值,即为结束。

交集做

交集做也可以使用计数器做。

var cook_count = 0;
A(function(res){
callback(res);
});
B(function(res){
callback(res);
});
function callback(res){
console.log(res);
cook_count++;
if(cook_count == 2){
     C(function(res){
    console.log(res);
    console.log("煮饭啦~~~");
     });
}
}

发布/订阅模式

我在上一篇文章《观察者模式与发布/订阅模式区别》有说明这种模式的特点,以及附上了js实现方式(这种模式有很多种实现的方式,这个只是简单的一种)。我们可以用这种模式来解决js异步编程。

顺序做

function A(){
  setTimeout(function(){
    pubsub.publish("A_FINISH", "买好菜了");
  }, 1000);
}
function B(){
  setTimeout(function(){
    pubsub.publish("B_FINISH", "买好肉了");
  }, 2000);
}
function C(){
  setTimeout(function(){
    pubsub.publish("C_FINISH", "洗米好了");
  }, 3000);
}
A();
pubsub.subscribe("A_FINISH", B);
pubsub.subscribe("B_FINISH", C);
pubsub.subscribe("C_FINISH", function(){
  console.log("煮饭啦~~~");
});

PS:还有一直很常用的jquery的自定义事件也是类似的写法(on、trigger)。

并发做

订阅/发布并没有真正优化到异步编程,所以并发做其实还要用其他方式去检查事情完成状态,就如之前的计数。

var cook_count = 0;
pubsub.subscribe("A_FINISH", callback);
pubsub.subscribe("B_FINISH", callback);
pubsub.subscribe("C_FINISH", callback);
function callback(res){
console.log(res);
cook_count++;
if(cook_count == 3){
console.log("煮饭啦~~~");
}
}

PS:交集做也是类似,就不举例了。

Promise/Deferred模式

ES6规范包含了Promise,Promise对象可以理解为一次将要执行的操作(常常被用于异步操作),使用了 Promise 对象之后可以用一种链式调用的方式来组织代码,让代码更加直观。。

顺序做

A().then(function(res) {
console.log(res);
return B();
}).then(function(res) {
console.log(res);
return C();
}).then(function(res) {
console.log(res);
console.log("煮饭啦~~~");
});
function A() {
return new Promise(function (resolve, reject) {
setTimeout(function(){
resolve("买好菜了");
}, 1000);
});
}
function B() {
return new Promise(function (resolve, reject) {
setTimeout(function(){
resolve("买好肉了");
}, 2000);
});
}
function C() {
return new Promise(function (resolve, reject) {
setTimeout(function(){
resolve("洗米好了");
}, 2000);
});
}

then方法定义:then(fulfilledAHandler, errorHandler),对应着Promise的resolve, reject。

并发做

Promise.all方法可做并发调用,当所有Promise 对象都变为完成态或失败态时,回调将被执行。

Promise.all([A(), B(), C()]).then(function (result) {
console.log(result); //["买好菜了", "买好肉了", "洗米好了"]
}); 

第三方框架实现

jQuery之Deferred

Deferred对象(jQuery的回调函数解决方案),对异步编程做了优化,有人总结四种功能。

一、 提供ajax操作的链式写法

$.ajax("test.html")
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });

PS:高于1.5.0版本,返回的是deferred对象,可以进行链式操作。

二、同一操作的多个回调函数

$.ajax("test.html")
.done(function(){ alert("哈哈,成功了!");} )
.done(function(){ alert("第二个回调函数!");} );

三、为多个操作指定回调函数

$.when($.ajax("test1.html"), $.ajax("test2.html"))
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });

PS:如果都成功了,就运行done()指定的回调函数;如果有一个失败或都失败了,就执行fail()指定的回调函数。

四、普通操作的回调函数接口

$(function(){
var A = function(){ //并不是ajax
  var dtd = $.Deferred();
setTimeout(function(){
dtd.resolve("买好菜了");
}, 1000);
   return dtd.promise(); // 返回promise对象
}; var B = function(){
  var dtd = $.Deferred();
setTimeout(function(){
dtd.resolve("买好肉了");
}, 2000);
  return dtd.promise(); // 返回promise对象
}; var C = function(){
  var dtd = $.Deferred();
setTimeout(function(){
dtd.resolve("洗米好了");
}, 2000);
  return dtd.promise(); // 返回promise对象
};
$.when(A(), B(), C())
  .done(function(v1, v2, v3){ console.log("煮饭啦~~~", v1 , v2, v3); })
  .fail(function(){ alert("出错啦!"); });
});

PS:deferred.promise()方法。它的作用是,在原来的deferred对象上返回另一个deferred对象,后者只开放与改变执行状态无关的方法(比如done()方法和fail()方法),屏蔽与改变执行状态有关的方法(比如resolve()方法和reject()方法),从而使得执行状态不能被改变。

总结

发布/订阅模式相对算是一种较为原始的方式,Promise/Deferred模式贡献了一个非常不错的异步任务模型的抽象,而实际上我们可能会常用的是第三方库来做异步编程,毕竟这些比较成熟及方便。另外如果有其他更好的异步编程方式请回复我一下,让我可以进行总结。

参考文献

jQuery的deferred对象详解》 by 阮一峰

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

js异步编程的更多相关文章

  1. JS魔法堂:深究JS异步编程模型

    前言  上周5在公司作了关于JS异步编程模型的技术分享,可能是内容太干的缘故吧,最后从大家的表情看出"这条粉肠到底在说啥?"的结果:(下面是PPT的讲义,具体的PPT和示例代码在h ...

  2. 深究JS异步编程模型

    前言  上周5在公司作了关于JS异步编程模型的技术分享,可能是内容太干的缘故吧,最后从大家的表情看出"这条粉肠到底在说啥?"的结果:(下面是PPT的讲义,具体的PPT和示例代码在h ...

  3. node.js异步编程的几种模式

    Node.js异步编程的几种模式 以读取文件为例: 1.callback function const fs = require('fs'); //callback function fs.readF ...

  4. 前端分享----JS异步编程+ES6箭头函数

    前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...

  5. JS异步编程 (2) - Promise、Generator、async/await

    JS异步编程 (2) - Promise.Generator.async/await 上篇文章我们讲了下JS异步编程的相关知识,比如什么是异步,为什么要使用异步编程以及在浏览器中JS如何实现异步的.最 ...

  6. JS异步编程 (1)

    JS异步编程 (1) 1.1 什么叫异步 异步(async)是相对于同步(sync)而言的,很好理解. 同步就是一件事一件事的执行.只有前一个任务执行完毕,才能执行后一个任务.而异步比如: setTi ...

  7. node.js异步编程解决方案之Promise用法

    node.js异步编程解决方案之Promise var dbBase = require('../db/db_base'); var school_info_db = require('../db/s ...

  8. 一个例子读懂 JS 异步编程: Callback / Promise / Generator / Async

    JS异步编程实践理解 回顾JS异步编程方法的发展,主要有以下几种方式: Callback Promise Generator Async 需求 显示购物车商品列表的页面,用户可以勾选想要删除商品(单选 ...

  9. 深入解析js异步编程利器Generator

    我们在编写Nodejs程序时,经常会用到回调函数,在一个操作执行完成之后对返回的数据进行处理,我简单的理解它为异步编程. 如果操作很多,那么回调的嵌套就会必不可少,那么如果操作非常多,那么回调的嵌套就 ...

随机推荐

  1. hdu4751Divide Groups(dfs枚举完全图集合或者bfs染色)

    /************************************************************************* > File Name: j.cpp > ...

  2. 邻接矩阵有向图(二)之 C++详解

    本章是通过C++实现邻接矩阵有向图. 目录 1. 邻接矩阵有向图的介绍 2. 邻接矩阵有向图的代码说明 3. 邻接矩阵有向图的完整源码 转载请注明出处:http://www.cnblogs.com/s ...

  3. Unity中 动态加载 Resources.Load()和Asset Bundle 的区别

    版权声明:本文为博主原创文章,未经博主允许不得转载. 初学Unity的过程中,会发现打包发布程序后,unity会自动将场景需要引用到的资源打包到安装包里,没有到的不会跟进去.我们在编辑器里看到的Ass ...

  4. Spark入门实战系列--5.Hive(上)--Hive介绍及部署

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .Hive介绍 1.1 Hive介绍 月开源的一个数据仓库框架,提供了类似于SQL语法的HQ ...

  5. Ajax 学习 - 基础学习

    <AJax - Async Javascript and xml - 异步的JavaScript和XML> 一.基础认识 AJax技术的目的:实现页面无刷新数据动态更改 优点:  + 不需 ...

  6. 基于MVC4+EasyUI的Web开发框架经验总结(3)- 使用Json实体类构建菜单数据

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  7. Java泛型-类型擦除

    一.概述 Java泛型在使用过程有诸多的问题,如不存在List<String>.class, List<Integer>不能赋值给List<Number>(不可协变 ...

  8. 介绍开源的.net通信框架NetworkComms框架 源码分析(十八 ) ConnectionListenerBase

    原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架  作者是英国人  以前是收费的 目前作者已经开源  许可是 ...

  9. windbg学习进阶之——windbg环境变量配置

    接触性能调优以来一直想学下windbg分析dump,每次看老师几个命令就能找到很底层的问题原因那简直就是羡慕加崇拜啊~但是这接近一年了,愣是没啥进展呢,主要就是在今天整理的这部分卡住了...这理由找的 ...

  10. jquery基本选择器id

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...