基于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 οnclick="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);

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

        });

}