用 JavaScript 在网页中模拟进度条

进度条在 Windows 系统中非常常见，例如一些软件的安装、部署过程都会显示进度条。

它能够告诉用户系统正在正常运行，而不是已经卡死，从而避免用户因为长时间没有反馈而进行错误操作，提高用户体验。

在 Web 中，我们同样可能遇到前台和服务器之间交换大量数据的情况，这时候也需要给用户一个比较好的提示。

例如一些图片浏览网站，当我们点击查看下一张图片时，很多网站都会显示一个“正在加载”的提示。

我个人觉得，这类提示不仅能够在一定程度上留住浏览者，也体现了一个网站是否真正考虑到了用户的使用体验。

当然，对于图片浏览网站来说，没有必要精确告诉用户图片已经下载了多少，因为一张图片一般不会占用太长的下载时间。

但是在一些特殊情况下，用户可能需要等待比较长的时间。

这时候，如果能够使用进度条显示当前任务的完成程度，用户就能够比较直观地知道当前任务进行到了什么阶段。

例如，客户端需要连续向服务器发送 100 个请求。

每次请求的数据量都不大，但是服务器处理这些请求需要比较长的时间。

这时候，我们可以通过 Ajax 向服务器发送请求，每成功返回一次数据，就让客户端的进度条增加 1%。

这样用户就可以知道当前任务的大致进度，从而合理安排自己的时间。

那么，这样的进度条应该怎么实现呢？

其实实现起来并不复杂。

Ajax 每次请求成功后，都可以执行一个回调函数，我们可以利用这个回调函数去更新进度条。

我的实现代码如下：

<!DOCTYPE HTML>
<html>
<body>
</body>

<script>

function Processbar(w, h, bc, pc){

    var w = w;              // 长度
    var h = h;              // 宽度
    var bordc = bc;         // 进度条边框颜色
    var processcolor = pc;  // 进度条颜色

    var bar = document.createElement("div");
    var process = document.createElement("div");

    this.show = function(){

        bar.style.width = w;
        bar.style.height = h;
        bar.style.border = "1px solid " + bordc;
        bar.style.borderRadius = "5px";

        process.style.width = "0px";
        process.style.height = h;
        process.style.borderRadius = "5px 0 0 5px";
        process.style.background = processcolor;

        bar.appendChild(process);
        document.body.appendChild(bar);
    }

    this.process = function(s){
        // 参数 s 为每次增加的百分比
        // 例如填 10，则每调用一次增加 10%
        var speed = parseInt(w) * s / 100;

        var processwidth = process.offsetWidth;

        if(processwidth <= bar.offsetWidth - speed){

            process.style.width =
                processwidth + speed + "px";

        }else{

            process.style.width = w;
            process.style.borderRadius = "5px";

            return;
        }
    }
}

var a = new Processbar(
    "500px",
    "30px",
    "#ccc",
    "red"
);

a.show();

setInterval(function(){
    a.process(1);
}, 100);

</script>
</html>

在上面的例子中，创建了一个 Processbar 类，这个类主要有两个方法。

show() 方法用来把进度条插入页面：

a.show();

而：

process()

方法则用来让进度条向前推进。

它接受一个参数，用来表示每次调用时，当前进度增加多少百分比。

例如：

a.process(1);

表示每调用一次，进度增加 1%。

那么调用 100 次之后，就可以填满整个进度条。

下面的：

setInterval(function(){
    a.process(1);
}, 100);

只是为了方便演示，简单模拟进度不断增加的情况。

在实际应用中，进度条并不是通过 setInterval() 自己不断增长，而是应该根据 Ajax 请求的实际执行结果，在每次请求成功之后更新对应的进度。

比如总共需要执行 100 个请求：

第 1 个请求成功 → 1%

第 2 个请求成功 → 2%

第 3 个请求成功 → 3%

……

第 100 个请求成功 → 100%

这样进度条显示的就是实际任务的完成程度，而不是单纯模拟一个不断增长的动画。