网页实现Progress bar效果

JavaScript 2015-08-18 进度条,Progress bar

Progress Bar

首先,目前几乎大多数网页上的Progress bar都是假的,在Browser与Server-side交互过程中,HTTP是没有办法预测此次请求需要返回的数据有多大,既然没有办法知道数据有多大自然就不可能绘制Progress bar,它跟Upload还不一样,Upload时已经知道文件的大小,它只要拿到Server-side返回的已上传大小数据就能绘制出Progress bar。

Angular 的一个插件效果

我最近也在项目里加了一个Progress bar,代码丑陋无比,这里就不贴了,说一说这中间遇到一些需要思考的问题。

如何设计

分三段:

1、0% - 20% or 30% 起步期间

2、20% or 30% - 90% 等待响应期间

3、90% - 100% 响应后,结束显示

发起一个Ajax请求后,Progress bar就会先走第一步,如果这期间Server-side没有响应,那么就会以1%-5%随机走第二步,如果这期间服务器没有响应就在90%地方静止不动,直到服务器端响应后在走完

多个请求同时存在

这是最不好处理的地方了,当然有些童鞋可能会说,让每一个请求同步不久避免了同时发起多个请求了吗?貌似看着很有理由,但是首先Ajax同步请求体验不好,还阻断浏览器执行,而你的Progress bar状态是需要一个setInterval不断去改变的,这个时候你会发现在服务器端没有返回之前,你的Progress bar是永远静止不动的。

既然不能避免同时存在多个请求,那么就要考虑如何处理同时发起多个Ajax请求之后,Progress bar如何处理。我的处理方法是把每一个Progress bar周期内的Ajax请求都加入队列,在这个队列都结束后才能让Progress bar结束,因为一个页面上就只有一个Progress bar,不能每一个Ajax请求都有对应的控制代码,否则就会出现回退,忽然多忽然少,闪烁的情况。

Abort

请求是可以abort的,比如在发现一段时间后服务器还没有响应,而你的进度条却一直悬挂在页面顶部,这让胆小的用户会以为你的页面可能正在工作而不敢贸然操作。所以对于每一个请求都要加入timeout机制,在timeout abort的请求,我认为最好的效果是让Progress bar回退,就类似于我们在安装桌面软件时可能中途出错,于是安装进度条就会回退

文字链接:《网页实现Progress bar效果

文章地址:http://www.qttc.net/201508467.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 3