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

news2024/11/24 4:41:34

fake-progress库的源码如下:

var 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();
    }
}

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));
};

FakeProgress.prototype.end = function () {
    this.stop();
    this.setProgress(1);
};

FakeProgress.prototype.stop = function () {
    clearInterval(this._intervalId);
    this._intervalId = null;
};

FakeProgress.prototype.createSubProgress = function (opts) {
    var parentStart = opts.start || this.progress;
    var parentEnd = opts.end || 1;
    var options = Object.assign({}, opts, {
        parent: this,
        parentStart: parentStart,
        parentEnd: parentEnd,
        start: null,
        end: null
    });
    var subProgress = new FakeProgress(options);
    return subProgress;
};

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%的进度条。

调用如下:

 

 

var fake = new FakeProgress({
        timeConstant: 1000,
        autoStart: true
    });

Object.defineProperties(fake, { progress: {
        get: function () {
            return progress;
        },
        set: function (val) {
            progress = val;
            var _proNum = parseInt(progress * 100);
            if (_proNum >= 99) {
                clearInterval(this._intervalId);
                this._intervalId = null;
            }
            $('#_progressBarBulletbox').progressbar('setValue', _proNum);
        }
    }
    });

function pageLoadBarDownFile(progressBarId) {
        progressBarId = progressBarId || "_progressBarBulletbox";
        var _width = $(window).width() / 2;
        var html = "<div id=\"" + progressBarId + "\" class=\"easyui-progressbar\" data-options=\"value:0\" style=\"width:" + _width + "px;\"></div>";
        $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body");
        $(html).appendTo("body").css({ display: "block", height: '10%', width: '50%', position: 'fixed', top: 0, right: 0, bottom: 0, left: 0, margin: 'auto', left: 0 });
    }

如果需要实现一个永远不满的进度条,那么你可以借助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 的值。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/772307.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ASUS华硕无双15_K3502ZA工厂模式原装Win11恢复原厂OEM预装系统 带ASUS Recovey恢复功能

ASUS华硕无双15笔记本电脑12代Vivobook_ASUSLaptop K3502ZA出厂Windows11系统工厂包 自带恢复功能、所有驱动、出厂主题壁纸LOGO、Office办公软件、MyASUS等预装程序 所需要工具&#xff1a;32G或以上的U盘 文件格式&#xff1a;HDI,SWP,OFS,EDN,KIT,TLK多个底包 文件大小&…

字符函数和字符串函数1(详解)

❤️ 作者简介 &#xff1a;对纯音乐情有独钟的阿甘 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识&#xff0c;对纯音乐有独特的喜爱 &#x1f4d7; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;如果你也感兴趣的话欢迎关注博主&#xff0c;期待更新 字符函数和…

JDBC编程连接MySQL数据库遇到的两个错误

在进行java与MySQL数据库进行连接的时候我遇到了两个报错&#xff0c;在一开始的时候遇到的报错是Access denied for user yulinlocalhost (using password: YES)&#xff0c;此时我在网络上搜索发现是密码出现错误的问题&#xff08;出现该问题确实是密码错误&#xff09;&…

cloudwatch agent通过squid代理上传指标到cloudwatch

1.安装cloudwatch agent代理 1.1、安装cloudwatch代理包 2.2、更改程序包的目录 3.3.创建cloudwatch代理配置文件 运行以下命令配置向导 sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-config-wizard 按照提示选择个性化服务 2.安装squid服务器 简…

200行代码写一个简易的C++小黑窗贪吃蛇游戏

分享一个简易的小黑窗贪吃蛇,一共就两百行代码左右(包含注释),很适合初学者巩固语法来练练手. 如果后续需要其他功能也可以再添加. 先小小展示一下: 源码在文末免费领取. 使用工具: VS2019(不是用VS的也可以直接找出cpp和h文件复制到你们用的IDE,甚至是记事本都可以) 闲话…

three.js学习记录(基础)

前言&#xff1a; 页面渲染3D特效&#xff0c;可以从各种图表库&#xff08;例如ECharts&#xff09;中寻找各种适用的模版&#xff0c;也可以寻找第三方插件。。。 一直以来都对three.js充满向往&#xff0c;终于偷闲找了个借口学了起来 参考资料 Three.js – JavaScript 3D…

MySQL数据库(五)

目录 一、数据库的约束 1.1 约束类型 1.1.1 null约束 1.1.2unique约束 1.1.3default默认值约束 1.1.4primary key主键约束 1.1.5foreign key外键约束 二、内容重点总结 一、数据库的约束 1.1 约束类型 not null - 指示某列不能存储 null值。unique - 保证某列的每行必须有唯一…

【C++】入门基础知识

命名空间 由来 在c语言中&#xff0c;任何函数&#xff0c;变量的名字都不能一样&#xff0c;如果是一个人的代码库里还好&#xff0c;大不了自己再改改&#xff0c;但是当和其他人&#xff0c;公司的库合起来&#xff0c;那就很麻烦了&#xff0c;到底是谁的名字改呢&#x…

求Sn=a + aa + aaa + aaaa + aaaaa的前5项之和,其中a是一个数字

求Sna aa aaa aaaa aaaaa的前5项之和&#xff0c;其中a是一个数字。 例如&#xff1a;2 22 222 2222 22222 解析&#xff1a; a aa aaa aaaa aaaaa a a*10a (a*10a)*10 a ((a*10a)*10 a) a ((a*10a)*10 a) a 直接上代码吧&#xff1a; #include&l…

java工作随笔

String s JSONObject.toJSONString(fixedAsset);logger.error("-----------------8------------------" s);CusFixedAssettDTO CusFixedAssettDTO3 JSONObject.parseObject(s, CusFixedAssettDTO.class);父类转子类 相同对象合并 import java.util.Date; Data T…

手把手教你搭建SpringCloud项目(九)集成OpenFeign服务接口调用

一、OpenFeign简介 什么是Feign&#xff1f; Feign是一个声明式WebService客户端。使用Feign能让编写Web Service客户端更加简单。它的使用方法是定义一个服务接口然后在上面添加注解。Feign也支持可拔插式的编码器和解码器。Spring Cloud对Feign进行封装&#xff0c;使其支持…

要想做好日语翻译,你需要这样做?

我们知道&#xff0c;中日两国一衣带水比邻而居&#xff0c;彼此之间的文化贸易往来非常频繁&#xff0c;对日语翻译的需求也日益增加。那么&#xff0c;想要做好日语翻译&#xff0c;我们该怎么做&#xff1f; 首先&#xff0c;要具备扎实的日语语言能力、较高的母语水平以及灵…

零基础学习,轻松打造物业服务小程序

现如今&#xff0c;物业服务已经成为了人们生活中不可或缺的一部分。为了更好地满足人们对物业服务的需求&#xff0c;许多企业和个人开始开发物业服务小程序&#xff0c;以便提供更加便捷和高效的服务。然而&#xff0c;对于大多数人来说&#xff0c;搭建一个小程序可能需要一…

从小白到大神之路之学习运维第64天--------Zabbix监控mysql、ftp服务以及自定义配置

第三阶段基础 时 间&#xff1a;2023年7月19日 参加人&#xff1a;全班人员 内 容&#xff1a; Zabbix监控mysql、ftp服务以及自定义 目录 一、Zabbix监控mysql数据库 二、Zabbix监控ftp服务 三、Zabbix自定义监控项 整体zabbix搭建完成&#xff0c;server端huyang1监…

golang 日志库zap和日志切割实践

介绍 在许多Go语言项目中&#xff0c;我们需要一个好的日志记录器能够提供下面这些功能&#xff1a; 能够将事件记录到文件中&#xff0c;而不是应用程序控制台。 日志切割-能够根据文件大小、时间或间隔等来切割日志文件。 支持不同的日志级别。例如INFO&#xff0c;DEBUG&a…

uni.app开发小程序如何获取当前经纬度、位置信息以及如何重新发起授权定位

uni.app开发小程序如何获取当前经纬度、位置信息以及如何重新发起授权定位 前提 先去微信小程序后台申请 wx.getLocation接口1.引入下载的高德小程序SDK2.data中定义所需变量3.onLoad中获取实例 并调用获取经纬度 位置方法4.定义获取定位经纬度 位置信息方法5.用户拒绝授权后,可…

【MySQL】查询进阶

查询进阶 数据库约束约束类型NULL , DEFAULT , UNIQUE 约束主键约束外键约束 聚合查询聚合函数group by子句HAVING 联合查询内连接外连接自连接子查询单行子查询多行子查询 数据库约束 约束类型 NOT NULL #表示某行不能储存空值 UNIQUE #保证每一行必须有唯一的值 DEFAULT #规…

DT灯光基础(辉光 雾 阴影 渲染选项)

点光源 不能宣染&#xff0c;换个版本。不能正常预览 聚光灯 t 手柄 挡光版 平行光阴影 光线追踪阴影 没有看见阴影 灯光使用贴图 环境光 不进行渲染物体 不渲染阴影 接收阴影 不反射 可以看到反射 没有反射了 灯光链接 取消灯照 灯光雾 辉光 变化不明显

【C++】C++入门必备知识详细讲解

C入门必备知识 一、命名空间1. namespace2. namespace 的使用场景 二、了解 C 中的输入和输出三、缺省参数四、函数重载1. 函数重载的概念2. C支持函数重载的原理 五、引用1. 引用的概念2. 引用特性3. 常引用4. 引用的使用场景&#xff08;1&#xff09;做参数&#xff08;传引…

No.2(3)——双指针算法实现平方数组排序

双指针算法指的是&#xff0c;从数组的两侧开辟指针变量进行查找&#xff0c;这类问题往往通过暴力&#xff08;双循环&#xff09;可以解出&#xff0c;而采用双指针相当于用空间换取时间&#xff0c;省略双层循环中重复的部分。 对于一个含有负数的有序数组&#xff0c;要求保…