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

使用定时器来处理数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//参数: 待处理的数组, 对每一个数组项调用的函数, 处理完成后运行的回调函数.
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);
}

例子:

1
2
3
4
5
6
7
8
9
var items = [1,2,3,4,5];
function output(value) {
console.log(value);
}
processArray(items, output, function(){
console.log("Done!");
})

提示:

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


分割任务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//参数: 由待执行函数组成的数组, 为每一个函数运行时提供参数的数组, 以及处理结束时调用的回调函数
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);
}

例子:

1
2
3
4
5
6
function saveDocument(id) {
var tasks = [openDocument, writeText, closeDocument, updateUI];
multistep(tasks, [id], function(){
alert("Done")
};
}

提示:

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

越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!