文档章节

jquery实现多任务

无知有趣
 无知有趣
发布于 2014/06/13 09:23
字数 720
阅读 208
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

在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" />&nbsp;&nbsp;
     <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:

"任务处理完成。"


无知有趣
粉丝 13
博文 120
码字总数 33484
作品 0
北京
后端工程师
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.4K
6
用vertx实现高吞吐量的站点计数器

工具:vertx,redis,mongodb,log4j 源代码地址:https://github.com/jianglibo/visitrank 先看架构图: 如果你不熟悉vertx,请先google一下。我这里将vertx当作一个容器,上面所有的圆圈要...

jianglibo
2014/04/03
4K
3
SQLServer实现split分割字符串到列

网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题。 先贴上某大牛写的s...

cwalet
2014/05/21
9.6K
0
表单验证插件--Jquery表单验证插件

目前支持对以下格式的值进行验证: cnum-(纯数字), char-(纯字母), zwen-(中文), bysc-(字母开头), mail(邮箱), yzbm(邮政编码) 其中的‘’表示长度,比如“zwen1-5”表示中文1-5位的长度。同...

huanganiu
2013/01/23
4.4K
0
Promises/A 和 when() 实现--When.js

When.js 是 cujojs 的轻量级的 Promises/A 和 when() 实现,从 wire.js 的异步核心和 cujojs 的 IOC 容器派生而来。包含很多其他有用的 Promiss 相关概念,例如联合多个 promiss、mapping 和...

匿名
2013/02/15
7.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

叮! Q币派送中,快来看看你中奖了吗?

中奖名单新鲜出炉啦! 大家好 为了感谢大家一直以来对我们公众号的关注和支持 D妹来给大家发!奖!品!了! 是哪几位幸运鹅 能把这30Q币收入囊中? 赶紧过来康康吧! 也欢迎各位后续多多分享...

腾讯云DNSPod
今天
0
0
Qt音视频开发5-vlc事件订阅

一、前言 事件订阅可以拿到文件长度、播放进度、播放状态改变等信息,vlc的事件订阅机制封装的比较友好,只需要先创建一个事件管理器,然后逐个订阅自己感兴趣的需要的事件,不感兴趣的可以不...

飞扬青云
6分钟前
0
0
酒精和药物影响下出现交通事故的频率

导读: 在酒精或药物影响下驾驶,已被认为是与发生潜在交通事故和出现严重伤亡结果相关的关键因素[1]。2016年,美国酒驾事故导致10,497人死亡,占当年交通事故死亡总人数的28%,其死亡总人数...

科研菌
昨天
0
0
高可用高并发的 9 种技术架构!

来源:androidchina http://www.androidchina.net/7928.html 1、分层 分层是企业应用系统中最常见的一种架构模式,将系统在横向维度上切分成几个部分,每个部分负责一部分相对简单并比较单一...

Java技术栈
7分钟前
0
0
联盟链要对区块链做减法

当前联盟链平台在公有链的基础上,对共识机制做调整,去掉公有属性,使得准入可控、效率提升,这实际上是对区块链在做减法。但这是否足够呢? 我们在应用中很快发现,联盟链的使用比较受限制...

FISCO-BCOS开源社区
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部