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

前端之家收集整理的这篇文章主要介绍了基于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);

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

});

}

猜你在找的Ajax相关文章