欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于JavaScript實現永遠加載不滿的進度條

 更新時間：2023年04月09日 10:55:43   作者：xiao_shan  
各位開發(fā)大佬，平時肯定見到過這種進度條吧，一直在加載，但等了好久都是在99%，那如何用JavaScript實現這一效果呢，下面就來和大家詳細講講

前言

各位開發(fā)大佬，平時肯定見到過這種進度條吧，一直在加載，但等了好久都是在99%

如下所示：

有沒有好奇這個玩意兒咋做的呢？細聽分說 （需要看使用：直接看實踐即可）

fake-progress

如果需要實現上面的這個需求，其實會涉及到fake-progress這個庫，具體是干嘛的呢？

這個庫會提供一個構造函數，創(chuàng)建一個實例對象后，里面的屬性會給我們進度條需要的數據等信息。

如圖所示：

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則是一個開關，如果開啟了直接執(zhí)行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 的值

總結，如果需要使用的話，在使用的地方創(chuàng)建一個實例即可(配置autoStart之后就會自動累加)：

new FakeProgress({
    timeConstant : 6000,
    autoStart : true
})

如果需要操作停止或介紹使用其實例下的對應方法即可

this.fake.end()
this.fake.stop()

以上就是基于JavaScript實現永遠加載不滿的進度條的詳細內容，更多關于JavaScript進度條的資料請關注腳本之家其它相關文章！

相關文章

最新評論