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. 正如数组处理那样, 使用此函数的前提条件: 任务可以异步处理而不影响用户体验或造成相关代码错误.