基于Ajax异步调用实现页面进度条Demo

一个伪进度条的实现过程：

1.操作效果：按下开始搜索按钮，总进度条开始向前移动，搜索结束进度条走完；

2.说明：移动是通过设置Interval定时器定时执行一个修改进度条<span>标签css width属性的百分比实现的，

之所以说是伪进度条是因为，设置了一个width的百分比常量，为90%，如果进度条还没走到90%的长度Ajax就有返回值，即搜索结束时，

就将进度条的width设置为100%；而如果进度条已经走到90%的长度了，但ajax还没有返回值的情况即还没有执行成功，就让进度条停止在90%的长度，直到

Ajax执行成功并有返回值的情况才立即设置width为100%；

3.代码：

（1）.js部分

<script type="text/javascript">
<!--
//初始化判断页面是否存在没有清除掉的interval
if(typeof(interval)!="undefined")
{
doClearInterval();
}
else
{
interval = null;
}

//进度条id
var totalProgress_node_id = "totalProgress";
//进度条进度
var totalProgress = 0;
function beginProgress()
{
totalProgress = 1;
interval = setInterval("doProgress()",300);//1000为1秒钟
}

//设置进度
function setProgress(node_id,progress)
{
if (node_id)
{
$("#" + node_id + " > span").css("width",String(progress) + "%");
//$("#" + node_id + "Text").html(String(progress) + "%");
}
}
//进行循环获取进度阶段
function doProgress()
{
setProgress(totalProgress_node_id,totalProgress);
totalProgress++;
if(totalProgress == 90)
{
doClearInterval();
}

}
//清除延时器
function doClearInterval()
{
clearInterval(interval);
}
//-->
</script>

（2）.html部分

<!-- 20141120 leo -->

<div style="height:55px;overflow: hidden;" id="totalProgressDiv">

<div>

<button onclick="searchDev()" class="button-form" style="background: url(&quot;public/images/btn_bg.jpg&quot;) repeat scroll 0pt 0pt transparent;">开始搜索</button>

</div>

<div style="height: 15px;line-height: 15px; float:left;margin-right:5px;margin-top:6px;"><span id="totalProgressTitle">总进度条</span></div>
<div id="totalProgress" class="progressBar" style="width:300px; float:left;margin-top:6px;">
<span> </span>
</div>

</div>

<!-- 20141120 leo -->

(3).ajax部分

function searchDev()// 开始搜索设备
{
//先清除Interval
doClearInterval();
beginProgress();

$.ajax({
url: "eleDeviceAction!searchDev.action?nowTime="+nowTime,
type: "POST",
dataType:"json",
async: true,
success:function(retData)
{
//先清除Interval
doClearInterval();
setProgress(totalProgress_node_id,99);

..............

});

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!