JavaScript 异步操作
串行执行
var items = []; for (var i=0;i<10000;i++){ items[i]=i+1; } console.log(items); var results = []; function async(arg, callback) { console.log('参数为 ' + arg +' , 1秒后返回结果'); setTimeout(function () { callback(arg * 2); }, 1000); } function final(value) { console.log('完成: ', value); } function series(item) { console.log(item) if(item) { async( item, function(result) { results.push(result); return series(items.shift()); }); } else { return final(results[results.length - 1]); } } series(items.shift());
并行执行
var items = []; for (var i=0;i<10000;i++){ items[i]=i; } var results = []; function async(arg, callback) { console.log('参数为 ' + arg +' , 1秒后返回结果'); setTimeout(function () { callback(arg * 2); }, 1000); } function final(value) { console.log('完成: ', value); } items.forEach(function(item) { async(item, function(result){ results.push(result); if(results.length === items.length) { final(results[results.length - 1]); } }) });
并行与串行的结合
<div id="app"></div>
var items = []; for (var i=0;i<1000;i++){ items[i] = i; } var results = []; var running = 0; var limit = 100; function async(arg, callback) { console.log('参数为 ' + arg +' , 1秒后返回结果'); $("#app").append('<div>参数为 '+ arg +' , 1秒后返回结果</div>') window.scrollTo(0,document.body.scrollHeight); setTimeout(function () { callback(arg * 2); }, 3000); } function final(value) { console.log('完成: ', value); $("#app").append('<div>完成 '+ value.toString() +'</div>') } function launcher() { while(running < limit && items.length > 0) { var item = items.shift(); async(item, function(result) { results.push(result); running--; if(items.length > 0) { launcher(); } else if(running == 0) { final(results); } }); running++; } console.log("当前执行任务数量:"+running+" 剩余任务数量:"+items.length); } launcher();