javascript异步变迁(一)

你可能知道,javascript在浏览器端是一门单线程的语言(single thread)。道理很简单,就是设计者当时设计这门语言的时候只是考虑到这门语言就是一个脚本语言,应该足够简单,要易于上手。

队列

  但是慢慢的发展就会产生一个问题,单线程一次只能执行一个任务,如果有多个任务同时执行,就必须排队,前面一个任务完成才能执行后面一个任务,以此类推。
  这种模式下你不用考虑复杂的线程安全,也不用考虑线程通信,故出发点是好的。但是有一个坏处,会发生线程阻塞,就是一个耗时很长的任务如果没有执行完,就会阻塞之后任务的执行。通俗的讲就是会造成浏览器的假死
  为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous)。

  • "同步模式"就是上一段的模式,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的;"异步模式"则完全不同,每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
  • "异步模式"非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。在服务器端,"异步模式"甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有http请求,服务器性能会急剧下降,很快就会失去响应。
    本文总结了"异步模式"编程的4种方法,理解它们可以让你写出结构更合理、性能更出色、维护更方便的Javascript程序。
异步

提示:异步不代表加快执行,通常我们说的异步是异步I/O,我们知道I/O操作远没有CPU的处理速度快。当我们去请求一个HTTP服务、查询一段SQL,读取一个文件的时候,会出现CPU占用不完全的情况,这个时候CPU必须要等待I/O操作完成,这个等待时间是不定的,就会导致CPU资源浪费。
合理的解决办法就是采用异步操作,当处于I/O等待状态就将CPU转换到其它任务当中,I/O结束等待后就重新获得该方法的控制权继续执行。


回调函数

JavaScript语言对异步编程的实现,就是回调函数。所谓回调函数,就是把任务的第二段单独写在一个函数里面,等到重新执行这个任务的时候,就直接调用这个函数。它的英语名字callback,直译过来就是"重新调用"。

先看一个最简单的回调

function f1(callback){
    //setTimeout是最简单的回调函数,等待一段时间后执行
  setTimeout(function () {
  // f1的任务代码
  callback();
  }, 1000);
}

当我们执行f1这个函数的时候,我们会加载一个定时器方法,1秒过后,会执行它的回调函数
读取文件进行处理,是这样写的。

 fs.readFile('/etc/passwd', function (err, data) {
     if (err) throw err;
     console.log(data);
 });console.log(data);});

上面代码读取了一个文件,回调函数有两个参数,第一个为错误对象,第二个为读取到的数据
让情况稍微复杂一点
看下面这个代码

 $.post("/ajax/post1",function(data){
    if(data.type=="book"){
        $.post("/ajax/book",function(data1){
            console.log(data1);
        });
    }else if(data.type=="article"){
        $.post("/ajax/article",function(data2){
            console.log(data2);
        });
    }
});

这个例子先请求了一个服务,根据返回的结果,判断它是哪一种状态,在根据它的状态又请求了一次服务。这个例子看起来还比较好受,我们在看下面这种状态,是不是大家都很熟悉。

                    });
                  });
                });
              });
            });
          });
        });
      });
    });
  });
});

上面这段代码就是javascript著名的回调陷阱,多次的嵌套回调会让你的代码乱成一团,并且难以维护
所以机智的开发人员为了解决这个问题,他们采取了很多种办法,咱们从简单的开始分析

异步函数式类库

  • Async.js
  • When.js
  • parallel.js
  • ...

上面这些库有一个共同点,就是通过函数的方式把异步方法嵌套在了一起,其实异步的本质还是没有改变,他们都基于Promises/A规范
而且这些库还有一个共通点,支持同步方法的队列执行,这个在js动画、集合处理等用的比较多,这里不多阐述。
我们这里拿When.js来讲解,首先,我们看一段代码:

var getData = function(callback) {
    $.getJSON(api, function(data){
        callback(data[0]);
    });
}
var getImg = function(src, callback) {
    var img = new Image();
    img.onload = function() {
        callback(img);
    };
    img.src = src;
}
var showImg = function(img) {
    $(img).appendTo($('#container'));
}
getData(function(data) {
    getImg(data, function(img) {
        showImg(img);
    });
});

这段代码完成了三个任务:1)获取数据;2)加载图片;3)显示图片,其中,任务1和2是异步,3是同步,使用的是最常见的callback机制来处理异步逻辑,好处是浅显易懂,缺点是强耦合、不直观、处理异常麻烦等等。
另外一种常见的实现异步编程的方案是事件监听器,例如使用QWrap的CustEvent,让任务成功时fireEvent,那么注册了这个Event的监听器就可以收到这个事件,并收到事件传递过来的数据,Dom标准事件也是采用的这种形式。这种方案也很好理解,代码从略。事件监听可以解耦,可以绑定任意多个监听器,但是依然不直观,而且事件发生之后再绑定的监听器也得不到触发。

我们尝试用when.js改写下这段代码

var getData = function () {
      var deferred = when.defer();

      $.getJSON(api, function (data) {
          deferred.resolve(data[0]);
      });

      return deferred.promise;
}
var getImg = function (src) {
      var deferred = when.defer();
      var img = new Image();
      img.onload = function () {
          deferred.resolve(img);
      };
      img.src = src;
      return deferred.promise;
}
var showImg = function (img) {
      $(img).appendTo($('#container'));
}
getData()
      .then(getImg)
      .then(showImg);

看最后三行代码,是不是一目了然,非常的语义化?
他解决了一个问题,就是我们前面提到的嵌套陷阱!
OK!下一章让我们来看一下Whenjs还有什么功能,当然这里的重点不是这个库,大家感兴趣的话可以自己去看看when.js,我们的重点是Promises/A规范

下一章我们继续

Promises/A规范详细阐述说明

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,409评论 25 707
  • 异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的,如果没有异步编程,根本...
    呼呼哥阅读 7,296评论 5 22
  • 欢迎阅读专门探索 JavaScript 及其构建组件的系列文章的第四章。 在识别和描述核心元素的过程中,我们还分享...
    OSC开源社区阅读 1,145评论 1 10
  • 2017年5月19日 星期五 天气晴 崔笑妈妈亲子日记 用心做一件事才有可能能把一件事情做的很好!但是...
    崔笑妈妈阅读 232评论 1 2
  • 活在他的世界里,我没了自我,眼里只有他,担心某一天,他有外遇,社会的诱惑那么大,他外遇了,我怎么办?我总是这样...
    Cuilyling阅读 173评论 0 0