Javascript使用定时器来处理数组和分割任务实现异步

使用定时器来处理数组

//参数: 待处理的数组, 对每一个数组项调用的函数, 处理完成后运行的回调函数.
function processArray(items, process, callback) {
    var todo = items.concat();

    setTimeout(function() {
        process(todo.shift());

        if (todo.length > 0) {
            setTimeout(arguments.callee, 25);
        } else {
            callback(items);
        }
    }, 25);
}

例子:

var items = [1,2,3,4,5];

function output(value) {
    console.log(value);
}

processArray(items, output, function(){
    console.log("Done!");
})

提示:

使用定时器处理数组的副作用是处理数组的总时长增加了. 这是因为在每一个条目处理完成之后UI线程会空闲出来, 并且在下一条目开始处理之前会有一段延时, 尽管如此, 为避免锁定浏览器给用户带来的体验, 这种取舍是有必要的.

分割任务

//参数: 由待执行函数组成的数组, 为每一个函数运行时提供参数的数组, 以及处理结束时调用的回调函数
function multistep(steps, args, callback) {
    var tasks = steps.concat();

    setTimeout(function() {
        //执行下一个任务
        var task = tasks.shift();
        task.apply(null, args || []);

        //检查是否还有其他任务
        if (tasks.length > 0) {
            setTimeout(arguments.callee, 25);
        } else {
            callback();
        }
    }, 25);
}

**例子: **

function saveDocument(id) {
    var tasks = [openDocument, writeText, closeDocument, updateUI];
    multistep(tasks, [id], function(){
        alert("Done")
    };
}

**提示: **

注意multistep( )的第二个参数必须为数组, 它创建时只包含一个id. 正如数组处理那样, 使用此函数的前提条件: 任务可以异步处理而不影响用户体验或造成相关代码错误.