jquery实现多任务
在webapp目录下新建3个文件index.html, list.json（模拟查询请求结果）和task.json（模拟任务处理结果），访问index.html。
index.html:
<html>
<head>
<title>jQuery并发任务</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#list td{border:1px solid #C0C0C0;}
#list th{border:1px solid #C0C0C0;background-color:#DCDCDC;}
#list tbody tr:hover{background-color:#e0e9f9;}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<table width="98%">
<tr>
<td align="left">
并发：<input id="num" value="10" style="width:40px;"/>
<input type="button" value="开始" id="btnS" onclick="begin();" />
<input type="button" value="停止" id="btnE" onclick="stop();" disabled="true" />
<br>
进度：<span id="speed" style="font-size:200%;color:green;">0</span><span style="font-size:200%;">/</span><span id="total" style="font-size:200%;color:red;">0</span>
</td>
</tr>
<tr>
<td align="right">
编号：<input id="taskID" value="" size=14/>
<input type="button" value="查询" id="btnQ" onclick="query();" />
</td>
</tr>
</table>
<br>
<table id="list" width="98%" cellspacing=0 style="border-collapse:collapse;">
<thead>
<tr>
<th nowrap width="5%" align='center'>序号</th>
<th nowrap width="15%" align='center'>编号</th>
<th nowrap width="40%">名称</th>
<th nowrap>处理结果</th>
</tr>
</thead>
<tbody id="listB"></tbody>
</table>
</body>
</html>
<script language="javascript">
var tasks = []; //列表json数组
var speed = 0; //已完成
var doing = 0; //处理中
var isStop= false; //是否停止
function query(){
$.ajax({
type: "POST",
url: "list.json",//TODO:列表查询action/a/b!list.action
data: "taskID="+$("#taskID").val(),
dataType: "json",
async: false,
error: function(request, msg) {
alert('无法访问。');
},
success: function(result){
tasks = result;
speed = 0;
doing = 0;
isStop= false;
$("#speed").text(0);
$("#total").text(tasks.length);
$("#btnS").attr("disabled",false);
$("#btnE").attr("disabled",true);
var trs = "";
for(var i=0;i<tasks.length;i++){
trs += "<tr>";
trs += "<td nowrap align='center'>"+(i+1)+"</td>";
trs += "<td nowrap align='center'>"+tasks[i].TASK_ID+"</td>";
trs += "<td nowrap id='vn"+i+"'>"+tasks[i].TASK_NAME+"</td>";
trs += "<td id='vr"+i+"'></td>";
trs += "</tr>";
}
$("#listB").html(trs);
}
});
}
function begin(){
isStop = false;
$("#btnS").attr("disabled",true);
$("#btnE").attr("disabled",false);
var num = Math.min($("#num").val(), tasks.length-doing);
//遍历列表，发送num个，在每个处理返回结果时再次发送，保证num个处理中，直到结束
for(var i=0; i<num; i++){
startTask(doing++);
}
}
function startTask(idx){
if(idx >= tasks.length){
$("#btnS").attr("disabled",true);
$("#btnE").attr("disabled",true);
return;
}
$.ajax({
type: "POST",
url: "task.json",//TODO:任务执行action/a/b!task.action
data: "pkTask="+tasks[idx].PK_TASK+"&taskID="+tasks[idx].TASK_ID,
dataType: "json",
error: function(request, msg) {
$("#vr"+idx).text(msg);
},
beforeSend: function(){
$("#vr"+idx).text("处理中...");
},
success: function(result){
$("#vr"+idx).text(result);
speed++;
$("#speed").text(speed);
if(!isStop){
startTask(doing++);
}
}
});
}
function stop(){
isStop = true;
$("#btnS").attr("disabled",false);
$("#btnE").attr("disabled",true);
}
</script>
list.json:
[{"PK_TASK":"1","TASK_ID":"ID-2014-0001","TASK_NAME":"任务1"},{"PK_TASK":"2","TASK_ID":"ID-2014-0002","TASK_NAME":"任务2"},{"PK_TASK":"3","TASK_ID":"ID-2014-0003","TASK_NAME":"任务3"},{"PK_TASK":"4","TASK_ID":"ID-2014-0004","TASK_NAME":"任务4"},{"PK_TASK":"5","TASK_ID":"ID-2014-0005","TASK_NAME":"任务5"},{"PK_TASK":"6","TASK_ID":"ID-2014-0006","TASK_NAME":"任务6"},{"PK_TASK":"7","TASK_ID":"ID-2014-0007","TASK_NAME":"任务7"},{"PK_TASK":"8","TASK_ID":"ID-2014-0008","TASK_NAME":"任务8"},{"PK_TASK":"9","TASK_ID":"ID-2014-0009","TASK_NAME":"任务9"},{"PK_TASK":"10","TASK_ID":"ID-2014-0010","TASK_NAME":"任务10"},{"PK_TASK":"11","TASK_ID":"ID-2014-0011","TASK_NAME":"任务11"},{"PK_TASK":"12","TASK_ID":"ID-2014-0012","TASK_NAME":"任务12"},{"PK_TASK":"13","TASK_ID":"ID-2014-0013","TASK_NAME":"任务13"},{"PK_TASK":"14","TASK_ID":"ID-2014-0014","TASK_NAME":"任务14"},{"PK_TASK":"15","TASK_ID":"ID-2014-0015","TASK_NAME":"任务15"}]
task.json:
"任务处理完成。"