JavaScript异步仿同步（控制流）的实现

在前端开发中尤其是在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);

});

巴特西

JavaScript异步仿同步（控制流）的实现

最新文章

热门文章