脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript进度条

基于JavaScript实现永远加载不满的进度条

 更新时间：2023年04月09日 10:55:43   作者：xiao_shan  
各位开发大佬，平时肯定见到过这种进度条吧，一直在加载，但等了好久都是在99%，那如何用JavaScript实现这一效果呢，下面就来和大家详细讲讲

前言

各位开发大佬，平时肯定见到过这种进度条吧，一直在加载，但等了好久都是在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进度条的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

最新评论