如何实现进度条

新手,没做过进度条,进度条是不是如下步骤:

1 :用ajax请求controller的某个方法

2:这个方法处理结果时时返回处理进度

3:把返回的进度用css标注一个深色背景就成了进度条

是这样做的吗?

那么问题来了,controller的方法怎么时时返回呢,不是只能返回一次后,下次请求就是会重新执行这个方法吗?怎么解决这个问题的啊,谢谢前辈

评论区

JFinal

2017-03-06 11:36

大致按下面的流程:
1:ajax 发起请求
2:控制器接受到请求以后,启动一个新的线程处理当前的任务,并且将该任务存放在一个下次请求到来时可以拿到的地方,例如用一个 static Map 来存放
3:控制器在启动线程处理任务以后,马上将该任务的 key 值,进度值返回给 ajax 这一端
4:ajax 这一端在拿到进度值操作一下界面,例如,显示进度条的长度。
5:过了一定的间隔以后再次发起 ajax 请求去获取当前的进度,发请求时将上次控制器传过来的任务的 key 值作为参数发过去
6:控制台通过 key 值去 static Map 中拿到任务,以及任务状态,再次返回给 ajax 端
7:重复上面第 4 步到第 7 步,直到任务完成

上面的过程比较复杂,一般通过如下方式进行简化:
1:ajax 发送请求,然后在页面显示一个 loading 样式的 gif 动画,该动画不关心进度值
2:控制器接受到请求以后,不创新线程处理任务,而是在当前线程直接处理,直到处理完成才 renderJson 给 ajax 这端
3:ajax 这端得到响应后,将 loading 的 gif 动画去除,并显示适当的消息

暴风雪

2017-03-07 11:05

@康康君 进度条有做吗 能否借鉴下

热门反馈

扫码入社