javascript异步任务流

Question

javascript异步任务流

如下一些任务，每个任务都是异步执行的，因为它们都要去网络上取一些数据，而且不知道什么时间能执行完成。

1. function output(msg){    $("#debug").append("<p>"+msg+"</p>");}function work1(callback){    output("begin work1");    $.get('data.js', function(data){        output("end work1");        if(typeof callback == 'function'){            callback();        }    });}function work2(callback){    output("begin work2");    $.get('data.js', function(data){        output("end work2");        if(typeof callback == 'function'){            callback();        }    });}function work3(callback){    output("begin work3");    $.get('data.js', function(data){        output("end work3");        if(typeof callback == 'function'){            callback();        }    });}如果我们同步调用这些任务，
3. work1();work2();work3();

复制代码会出现如下结果

begin work1begin work2begin work3end work1end work2end work3但我们想第一个任务完成后再执行第二个任务，依次类推，如果不借助异步框架的支持，我们就需要修改work1,work2,work3的代码，让他们完成后执行相应的后续任务,这样以后要修改任务流就需要改动具体任务的代码，变化点比较分散。

也可以在开始执行任务前准备一些回调函数，然后再开始，这样封装了变化点，提高了代码的可读性，大致如下

1. var callback3 = function(){work3();};var callback2 = function(){work2(callback3);};var callback1 = function(){work1(callback2);}callback1();

复制代码执行结果如下

1. begin work1
2. end work1
3. begin work2
4. end work2
5. begin work3
6. end work3

复制代码可以看到这段代码虽然执行结果符合预期，但可读性和可维护性太差了，一大串匿名函数，而且写的顺序还得仔细注意，所以我写了个小框架了让它变的简单。

1. function AsyncWorkManager(){    this.works = [];}AsyncWorkManager.prototype.addWork = function(callee, caller){    if(typeof callee!= 'function')        throw {name:"TypeError",message:"work must be a function"};    this.works.push([callee, caller]);};AsyncWorkManager.prototype.start = function(){      var me = this;    var arr = [];    var j = 0;    for(var i = this.works.length - 1;i >=0; i--){        var fun = function(){            var work = me.works[j++];            work[0].call(work[1],arr.pop());        };        arr.push(fun);    }    arr.pop()();};

复制代码代码很少，但效果很好，再次写调度代码就简单了，如下。

2. var manager = new AsyncWorkManager();manager.addWork(work1);manager.addWork(work2);manager.addWork(work3);manager.start();

复制代码