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

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异步调用实现页面进度条Demo的更多相关文章

  1. ios – 不使用桥接头访问私有UIKit功能

    人们似乎把我的问题与“我如何拍摄截图”混淆?

  2. iOS和Android的常用随机数生成器

    如果我们在两者中都提供相同的种子,我需要一个在iOS和Android中产生相同数字序列的随机数生成器.我用srand(1000)尝试了rand()函数.但它给出了不同的输出.然后我尝试了mersennetwister.但这也为同一种子提供了不同的序列.有谁可以帮我这个.我正在使用cocos2d-x进行开发.解决方法我已经改编了一个在线CRandomMersenne库,我真的很抱歉,我再也找不到那个

  3. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

  4. Swift根据日期字符串返回日期是星期几

    weekday}在这个版本的实现中,首先要知道timeIntervalSince1970是取当前日期和1970-01-010点的时间差,当天是星期四,因此根据时间差算星期几时需要加4;为了保证输入年份小于1970时仍然有效,也就是说interval以及days有可能为负数,因此模7取余后,又进行了加7和模7;最后,为了调整weekday按之前约定星期一从1开始编号,需要将计算的0值转换成7,于是有了最后一行的“returnweekday==0?7:weekday”。

  5. HealthKit Swift workout

    本项目继续从前面的HealthKit教程开始。大部分workout拥有一个或多个下列属性:活动类型距离开始时间、结束时间消耗的热量HealthKit以同样的方式理解workout。HealthKit用类似的方式处理HKWorkout。查询workout现在已经能保存workout了,但还需要有一种方法从HealthKit加载workout。nspredicate用于决定要查询的HealthKit数据的类型,sortdescriptor用于告诉HealthKit如何对返回的样本进行排序。HKSource用于

  6. 什么是快速范围内的“间隔”?

    我知道有3种类型的范围:范围,步幅和间隔.什么是swift的间隔?他们使用的一个例子是什么?

  7. 在swift脚本中等待异步调用

    我正在编写一个swift脚本,在终端中运行,向后台线程调度几个操作.在完成所有调度之后,没有任何额外的努力,代码到达文件的末尾并退出,也杀死我的后台操作.在我的后台操作完成之前,保持swift脚本活着的最佳方法是什么?

  8. swift – 将参数传递给方法时出现“调用中的额外参数”错误

    我试图在swift中编写以下Objective-C代码:它会写本周开始的时候开始的周期和周期间隔.在我写的操场上虽然代码完成告诉我签名是在调用中说出额外参数’interval’时出错我究竟做错了什么?

  9. android – Phonegap本地构建 – jquery ajax错误:readystate 0 responsetext status 0 statustext error

    解决方法您是否在索引文件中包含了内容安全元标记?

  10. android – 如何处理Events.RRULE

    我有日历视图,我正在设置事件,但我不知道如何处理重复事件.我通过游标获得了Event.RRULE的值:例如,rrule值是:如何从此字符串中获取值以将其设置为日历值?例如,我想得到星期一–MO在Calendar对象中设置它解决方法有不同的库来处理RRULE.你可以使用google-rfc-2445而不是以有用的方式使用已创建对象的属性,或者您可以使用lib-recur并使用来自规则对象的已解析属性.

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部