基于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("public/images/btn_bg.jpg") 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);

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

        });

}