基于JavaScript实现永远加载不满的进度条
作者：xiao_shan
前言
各位开发大佬，平时肯定见到过这种进度条吧，一直在加载，但等了好久都是在99%
如下所示：
有没有好奇这个玩意儿咋做的呢？细听分说 （需要看使用：直接看实践即可）
fake-progress
如果需要实现上面的这个需求，其实会涉及到fake-progress这个库，具体是干嘛的呢？
这个库会提供一个构造函数，创建一个实例对象后，里面的属性会给我们进度条需要的数据等信息。
如图所示：
fake-progress库的源码如下：
/**
* Represents a fakeProgress
* @constructor
* @param {object} options - options of the contructor
* @param {object} [options.timeConstant=1000] - the timeConstant in milliseconds (see https://en.wikipedia.org/wiki/Time_constant)
* @param {object} [options.autoStart=false] - if true then the progress auto start
*/
const FakeProgress = function (opts) {
if (!opts) {
opts = {};
}
// 时间快慢
this.timeConstant = opts.timeConstant || 1000;
// 自动开始
this.autoStart = opts.autoStart || false;
this.parent = opts.parent;
this.parentStart = opts.parentStart;
this.parentEnd = opts.parentEnd;
this.progress = 0;
this._intervalFrequency = 100;
this._running = false;
if (this.autoStart) {
this.start();
}
};
/**
* Start fakeProgress instance
* @method
*/
FakeProgress.prototype.start = function () {
this._time = 0;
this._intervalId = setInterval(
this._onInterval.bind(this),
this._intervalFrequency
);
};
FakeProgress.prototype._onInterval = function () {
this._time += this._intervalFrequency;
this.setProgress(1 - Math.exp((-1 * this._time) / this.timeConstant));
};
/**
* Stop fakeProgress instance and set progress to 1
* @method
*/
FakeProgress.prototype.end = function () {
this.stop();
this.setProgress(1);
};
/**
* Stop fakeProgress instance
* @method
*/
FakeProgress.prototype.stop = function () {
clearInterval(this._intervalId);
this._intervalId = null;
};
/**
* Create a sub progress bar under the first progres
* @method
* @param {object} options - options of the FakeProgress contructor
* @param {object} [options.end=1] - the progress in the parent that correspond of 100% of the child
* @param {object} [options.start=fakeprogress.progress] - the progress in the parent that correspond of 0% of the child
*/
FakeProgress.prototype.createSubProgress = function (opts) {
const parentStart = opts.start || this.progress;
const parentEnd = opts.end || 1;
const options = Object.assign({}, opts, {
parent: this,
parentStart: parentStart,
parentEnd: parentEnd,
start: null,
end: null,
});
const subProgress = new FakeProgress(options);
return subProgress;
};
/**
* SetProgress of the fakeProgress instance and updtae the parent
* @method
* @param {number} progress - the progress
*/
FakeProgress.prototype.setProgress = function (progress) {
this.progress = progress;
if (this.parent) {
this.parent.setProgress(
(this.parentEnd - this.parentStart) * this.progress + this.parentStart
);
}
};我们需要核心关注的参数只有timeConstant，autoStart这两个参数，通过阅读源码可以知道timeConstant相当于分母，分母越大则加的越少，而autoStart则是一个开关，如果开启了直接执行start方法，开启累计的定时器。通过这个库，我们实现一个虚拟的进度条，永远到达不了100%的进度条。
但是如果这时候像接口数据或其他什么资源加载完了，要到100%了怎么办呢？可以看到代码中有end()方法，因此显示的调用下实例的end()方法即可。
实践
上面讲了这么多下面结合圆形进度条（后面再出个手写圆形进度条）来实操一下，效果如下：
代码如下所示：
<template>
<div ref="main" class="home">
</br>
<div>{{ fake.progress }}</div>
</br>
<Progress type="circle" :percentage="parseInt(fake.progress*100)"/>
</br></br>
<el-button @click="stop">停止</el-button>
</br></br>
<el-button @click="close">关闭</el-button>
</div>
</template>
<script>
import FakeProgress from "fake-progress";
export default {
data() {
return {
fake: new FakeProgress({
timeConstant : 6000,
autoStart : true
})
};
},
methods:{
close() {
this.fake.end()
},
stop() {
this.fake.stop()
}
},
};
</script>总结
如果需要实现一个永远不满的进度条，那么你可以借助fake-progress核心是1 - Math.exp((-1 * this._time) / this.timeConstant) 这个公式
涉及到一个数据公式： e的负无穷次方 趋近于0。所以1-e^-x永远到不了1，但趋近于1
核心原理就是：用时间做分子，传入的timeConstant做分母，通过Math.exp((-1 * this._time) / this.timeConstant) 可知，如果时间不断累积且为负值，那么Math.exp((-1 * this._time) / this.timeConstant) 就无限趋近于0。所以1 - Math.exp((-1 * this._time) / this.timeConstant) 就可以得到无限趋近于1 的值
总结，如果需要使用的话，在使用的地方创建一个实例即可(配置autoStart之后就会自动累加)：
new FakeProgress({
timeConstant : 6000,
autoStart : true
})如果需要操作停止或介绍使用其实例下的对应方法即可
this.fake.end() this.fake.stop()
以上就是基于JavaScript实现永远加载不满的进度条的详细内容，更多关于JavaScript进度条的资料请关注脚本之家其它相关文章！