1)简单的等待界面:这种做法之所以说简单,就是在用法发送了处理命令后,立即在页面的某个地方替换一个waiting的图片,比如一个转圈的GIF,一张Loading的图片等,这种不称之为进度条,顶多就是个等待条,但通常还是可以给用户带来那么点满足,在业务量不大的情况下,也够用了。
2)真实的等待进度:比如说,我要在B/S系统中实现一个数据导入的功能,数据文件总共有100个,每个文件包含成千上万的数据,导入过程可能需要15分钟,那么我还用一个图片在那边打转吗?现在这样还是不够的,我可能需要让使用者知道,我当前处理的是第几个文件,还剩下几个,处理的百分比,并显示一个加载的真实进度条,这个进度条要如实反映处理的百分比。
实现1:由于用户处理的数据量大,可以在文件导入过程中,循环计算进度,并将进度信息存储在上下文中,并在前台页面定时从上下文读取进度数据,并在页面显示。这种方法思路比较直接。
实现2:使用观察者模式,实现进度主动通知。思路是:在处理过程中,计算进度信息,并将进度数据通知给观察者,前台页面定时向观察者咨询进度,并将进度显示到页面中。
js实现进度条的方法:
1.setTimeout和clearTimeout
setTimeout和clearTimeout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<
html
>
<
head
>
<
title
>进度条</
title
>
<
style
type
=
"text/css"
>
.container{
width:450px;
border:1px solid #6C9C2C;
height:25px;
}
#bar{
background:#95CA0D;
float:left;
height:100%;
text-align:center;
line-height:150%;
}
</
style
>
<
script
type
=
"text/javascript"
>
function run(){
var bar = document.getElementById("bar");
var total = document.getElementById("total");
bar.style.width=parseInt(bar.style.width) + 1 + "%";
total.innerHTML = bar.style.width;
if(bar.style.width == "100%"){
window.clearTimeout(timeout);
return;
}
var timeout=window.setTimeout("run()",100);
}
window.onload = function(){
run();
}
</
script
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
div
id
=
"bar"
style
=
"width:0%;"
></
div
>
</
div
>
<
span
id
=
"total"
></
span
>
</
body
>
</
html
>
|
效果图:
2.setInterval和clearInterval
效果图:
3.setTimeout和setInterval区别
setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() ,setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭,或者让 code 自身再次调用 setTimeout()。