进度条这种反应进程的东西在我看来是很需要的,特别是当下载或者上传文件的时候,或者在线读取文件的时候。
但是,又有一个问题,前端还是后端来做呢?
前端
<div id="myprogress" class="progress">
<div id="myBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
function move()
{
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
//elem.style.display="none";
} else {
width=width+5;
elem.style.width = width + '%';
elem.innerHTML = width + '%';
}
}
写代码前,我们就有讨论过,将哪一变量用来监视进度。最后我们用了 readyState。因为他有4种状态,而且是依次变化,0到4。0表示开始,4表示完成。
大多数情况下,这个工作起来效果还行,但是源代码是这样的。
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
myFunction(myArr);
}
};
也就是说,传输完成其实是有两个条件的,我们只监视了第一个条件,而大多数情况下this.status == 200的。所以说,这个是有风险的。即进度条已经完整,但是内容都出不来。
后端
有人说,用总量除以速度;也有人说,在后台对任务进程进行监测;还有人说,动画代替(相当于没有进度条);更搞笑的是,有人说只看什么时候任务完成,完成了,进度条自然就完整了。。。。笑死了。