--- theme: smartblue --- # 前言 **各位开发大佬，平时肯定见到过这种进度条吧，一直在加载，但等了好久都是在99%** ![36313B6C.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2fefa58c9ea4d8c8a02a76d916f127b~tplv-k3u1fbpfcp-watermark.image?) **如下所示：** 动画22222.gif

**有没有好奇这个玩意儿咋做的呢？** **细听分说** **（需要看使用：直接看实践即可）** # fake-progress 如果需要实现上面的这个需求，其实会涉及到fake-progress这个库，具体是干嘛的呢？这个库会提供一个构造函数，创建一个实例对象后，里面的属性会给我们进度条需要的数据等信息。如图所示：动画22222.gif

fake-progress库的源码如下： ```js /** * 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()方法即可。** # 实践上面讲了这么多下面结合圆形进度条（**后面再出个手写圆形进度条**）来实操一下，效果如下：动画22222.gif

代码如下所示： ```js ``` # 总结如果需要实现一个永远不满的进度条，那么你可以借助**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之后就会自动累加)： ```js new FakeProgress({ timeConstant : 6000, autoStart : true }) ``` 如果需要操作停止或介绍使用其实例下的对应方法即可 ```js this.fake.end() this.fake.stop() ```