异步流程控制

主流的解决回调金字塔

事件发布订阅模式

异步流程控制库

Promise

Generator

事件发布订阅模式

$.get("http://data1_source", function (data1) {
  $.get("http://data2_source", function (data2) {
    $.get("http://data3_source", function (data3) {
      var html = fuck(data1, data2, data3);
      render(html);
    });
  });
});

(function () {
  var count = 0;
  var result = {};

  $.get('http://data1_source', function (data) {
    result.data1 = data;
    count++;
    handle();
    });
  $.get('http://data2_source', function (data) {
    result.data2 = data;
    count++;
    handle();
    });
  $.get('http://data3_source', function (data) {
    result.data3 = data;
    count++;
    handle();
    });

  function handle() {
    if (count === 3) {
      var html = fuck(result.data1, result.data2, result.data3);
      render(html);
    }
  }
})();

var ep = new eventproxy();
ep.all('data1_event', 'data2_event', 'data3_event', function (data1, data2, data3) {
  var html = fuck(data1, data2, data3);
  render(html);
});

$.get('http://data1_source', function (data) {
  ep.emit('data1_event', data);
  });

$.get('http://data2_source', function (data) {
  ep.emit('data2_event', data);
  });

$.get('http://data3_source', function (data) {
  ep.emit('data3_event', data);
  });

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

var stack = [];
stack.push(fn1);
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() }); 

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() }); 

遇到了问题

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

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

var index = 0;

function next() {
    var fn = stack[index];
    index = index + 1; 
    if (typeof fn === 'function') fn();
}

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

看下connect源码

谢谢