小虾虎鱼

小虾虎鱼

JavaScript异步仿同步(控制流)的实现

作者 禾惠 发表于 2015/07/02,最后修改于 2015/07/02

在前端开发中尤其是在nodejs开发中经常会遇到这样的场景(以ajax为例):有3个(或者更多个)Ajax请求,并且第2个请求依赖于第1个,第3个请求依赖于第2个,那我们可能就会在发第一个Ajax后回调再执行第二个Ajax,第二个执行后再在回调里面执行第三个,如此就形成了回调金字塔了,也显得复杂,当然这种问题也有许多插件,如:Promise、async等。 自己写了一个简单的实现方法:

/**
 * 控制流/同步
 * @param {Array} arr
 * @param {Function} callback1 传递两个参数 (item,next),执行完一项则需执行next()才能执行下一项
 * @param {Function} callback2 出错或执行完时回调
 * @returns {*}
 */
function async (arr, callback1, callback2) {
    if (Object.prototype.toString.call(arr) !== '[object Array]') {
        return callback2(new Error('第一个参数必须为数组'));
    }
    if (arr.length === 0)
        return callback2(null);
    (function walk(i) {
        if (i >= arr.length) {
            return callback2(null);
        }
        callback1(arr[i], function () {
            walk(++i);
        });
    })(0);
}

使用示例:

var arr = ['/a', '/b', '/c', '/d'];
async(arr, function(item, next){
    $.ajax({
        url:item,
        complete:function(){
            next();
        }
    });
},function(err){
    console.log(err);
});