借助Q.js学习javascript异步编程。

金字塔式

//add1
function step1(n, callback) {
    setTimeout(function(){
        callback.call(null, n + 1);
    }, 100);
};

//add2
function step2(n, callback) {
   setTimeout(function(){
        callback.call(null, n + 2);
    }, 100);
};

//add3
function step3(n, callback) {
    setTimeout(function(){
        callback.call(null, n + 3);
    }, 100);
};

//add4
function step4(n, callback) {
    setTimeout(function(){
        callback.call(null, n + 4);
    }, 100);
};

首先看这4个方法，都是setTimeout加上一个数字。接下来我们就用这四个方法实现+1,+2,+3,+4

step1(1, function(n){
    step2(n, function(n){
        step3(n, function(n){
            step4(n, function(n){
                alert(n); //11
            });
        });
    });
});

ok~~~， 不错，功能实现了。

链式

如果我们Q.js如何来改进这段代码呢？

//add1
function step1(n) {
    var dtd = Q.defer();
    setTimeout(function(){
        dtd.resolve(n + 1);
    }, 100);
    return dtd.promise;
};

//add2
function step2(n) {
   var dtd = Q.defer();
    setTimeout(function(){
        dtd.resolve(n + 2);
    }, 100);
    return dtd.promise;
};

//add3
function step3(n) {
    var dtd = Q.defer();
    setTimeout(function(){
        dtd.resolve(n + 3);
    }, 100);
    return dtd.promise;
};

//add4
function step4(n) {
    var dtd = Q.defer();
    setTimeout(function(){
        dtd.resolve(n + 4);
    }, 100);
    return dtd.promise;
};

Q.when(step1(1))
    .then(step2)
    .then(step3)
    .then(step4)
    .then(function(n){
        alert(n); //11
    });

看上去好多了，金字塔不见了，就成流水一般的代码，当然单个的function有点变得复杂，但整理结构变得好理解了。

还可以这样子

Q(1)
    .then(step1)
    .then(step2)
    .then(step3)
    .then(step4)
    .then(function(n){
        alert(n);//11
    });

我们需要一起返回 all

    var func1 = function(){
        var dtd = Q.defer();
        setTimeout(function(){
            dtd.resolve(1);
        }, 1000);
        return dtd.promise;
    };


    var func2 = function(){
        var dtd = Q.defer();
        setTimeout(function(){
            dtd.resolve(10);
        }, 2000);
        return dtd.promise;
    };

    Q
        .all([func1(), func2()])
        .then(function(arr){
            console.log(arr);
        });

你不知道func1 和func2 什么时候会执行完成，但是我们需要这两个方法的返回结果，这看上去解决了我们的一个大问题。

spread也能实现

var func1 = function(){
    return Q.Promise(function(resolve, reject, notify) {
        setTimeout(function(){
            resolve(1);
        }, 1000);
    });
}


var func2 = function(){
     return Q.Promise(function(resolve, reject, notify) {
        setTimeout(function(){
            resolve(10);
        }, 1000);
    });
};

Q
    .spread([func1(), func2()], function(a, b){
        console.log(a, b); //1 10
    });

这例子中还用了Q.Promise。 这看上去比 Q.defer()省事一点。

其实呢这库应该还有很多方法，我初学了一下，觉得不错，所以现学现卖，感兴趣的同学可以看一下这个库https://github.com/kriskowal/q
中文文档也不多，哈哈！慢慢啃吧.

学习的时候请加库

<script src="http://cdn.bootcss.com/q.js/1.4.0/q.js"></script>