文档章节

jquery实现多任务

无知有趣
 无知有趣
发布于 2014/06/13 09:23
字数 720
阅读 198
收藏 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
博文 117
码字总数 33264
作品 0
北京
后端工程师
私信 提问
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0
20+功能强大的jQuery/CSS3图片特效插件

以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3。 1、jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有弹跳...

ruby_chen
2013/10/14
24.6K
5
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
0
0
jQuery.noConflict() 函数详解

jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权。 一般情况下,在jQuery库中,变量$是变量jQuery的别名,它们之间是等价的,例如jQuery("p")和$("p")是等价的。由于...

鱼煎
2015/07/20
0
0
2011年最新20个jQuery构建的超酷视觉效果教程

日期:2011/08/03 原文:line25.com 编译:Terry li - GBin1.com 作为web开发程序员来说,我们都非常喜欢jQuery构造的超酷视觉效果。在本篇GBin1文章中我们将精选一组jQuery效果教程。大家将...

gbin1
2011/08/03
383
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7重置密码、单用户模式、救援模式、ls命令、chmod命令

在工作当中如果我们错误的配置了文件使服务器不能正常启动或者忘记密码不能登录系统,如何解决这些问题呢?重装系统是可以实现的,但是往往不能轻易重装系统的,下面用忘记密码作为例子讲解如...

李超小牛子
今天
3
0
Python如何开发桌面应用程序?Python基础教程,第十三讲,图形界面

当使用桌面应用程序的时候,有没有那么一瞬间,想学习一下桌面应用程序开发?行业内专业的桌面应用程序开发一般是C++,C#来做,Java开发的也有,但是比较少。本节课会介绍Python的GUI(图形用...

程序员补给栈
今天
6
0
kafka在的使用

一、基本概念 介绍 Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统...

狼王黄师傅
今天
3
0
Android JNI总结

0x01 JNI介绍 JNI是Java Native Interface的缩写,JNI不是Android专有的东西,它是从Java继承而来,但是在Android中,JNI的作用和重要性大大增强。 JNI在Android中起着连接Java和C/C++层的作...

天王盖地虎626
昨天
3
0
大数据教程(11.8)Hive1.2.2简介&初体验

上一篇文章分析了Hive1.2.2的安装,本节博主将分享Hive的体验&Hive服务端和客户端的使用方法。 一、Hive与hadoop直接的关系 Hive利用HDFS存储数据,利用MapReduce查询数据。 二、Hive与传统数...

em_aaron
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部