JavaScript模拟实现进度条

                  JavaScript模拟实现进度条

需求描述： 客户端excel导入大量数据，服务器处理起来比较慢，且服务器无法返回当前文件的处理进度（此处进度可以理解为服务器已处理的数据条数/上传总条数 ），这时如若服务器处理过慢，一直不给客户端响应，而客户端也没有相关变化的情况下，会导致用户体验及其不好。

解决方案： 客户端自己实现一个假进度条，当上传开始后显示一个进度条给用户。

实现细节： 
       1、发起请求。

       2、显示进度条，进度条前进百分比初始化为0；

       3、产生随机数进度条前进的百分比和所需时间随机数（根据参数产生）；

       4、如果进度条到达成功前可以前进最大值（此时请求还没有响应，最大值根据参数），卡死进度条，等待响应。

       5、收到服务器响应，请求成功，无论进度条在何位置，均在0.3s内走完进度条，调用成功的回调。

       6、请求失败， 调用失败的回调。
源码： 

  /*
 * version 1.1.0
 假进度条：

  实现服务器处理数据的假进度:
  当达到某个值之后，若服务器还没有处理完，则停止进度条前进，待服务器处理完之后，结束进度条。
  若进度条还没有走完，服务器就已经完成处理，加速走完进度条
  参数说明：带*为必须参数

调用实例：

var process=new ProcessedAjax({
                url: "url",
                type: "get",
                okCallback: function(data){
                   alert("成功了");
                    console.log(data);
                    process.destroy();
                },
                errorCallback: function(data){
                    alert("失败了")
                    console.log(data);
                }
            });
 1.url(*)
  发起请求的url
 2.type（默认post）
  请求类型
 3.data（默认{}）
  参数
 4.okCallback （）
  成功的回调
 5.errorCallback（）
  失败的回调
 6.backColor（默认#eee）
  自定义进度条默认颜色
 7.processColor（默认#009ed8）
  自定义进度颜色
 8.stillTime（单位S，默认3）
  进度条时间
 9.stepTime（单位S，默认.3）
  每走一步的间隔时间
 10.stepNum（默认10%）0-100之间
  每走一步的进度百分比
 11.container
  装进度条的容器
 12:deadline（默认90%）0-100之间
  进度条卡死百分比
 13:duringTime
  进度条走一步的动画时间
 依赖说明： 依赖jquery
 * */
function ProcessedAjax(option) {
try {
var _this = this.__proto__;
if(!option.url) {
console.error("url不能为空");
return;
}
if(option.type && option.type.indexOf(_this.ALLOW_AJAX_TYPE) < 0) {
console.log("ajax类型不允许");
return;
};
console.log(_this)
option = _this.arguPrevHandle(option);
_this.settings = $.extend({}, _this.DEFAULT_ARGU, option);
_this.sendToServer();
return {
start: _this.sendToServer,
destroy: _this.destroy
}
} catch(e) {
console.log("运行时发生了错误：" + e.message);
}
}


//默认参数
ProcessedAjax.prototype.DEFAULT_ARGU = {
type: "post",
data: {},
okCallback: function(data) {},
errorCallback: function(data) {},
backColor: "#eee",
processColor: "#009ed8",
stillTime: 3,
stepTime: .3,
stepNum: 10,
deadline: 90,
duringTime: .3
}


//允许的ajax类型
ProcessedAjax.prototype.ALLOW_AJAX_TYPE = ["get", "post", "delete", "put"];


//传入参数预处理
ProcessedAjax.prototype.arguPrevHandle = function(option) {
option.okCallback = (option.okCallback instanceof Function) ? option.okCallback : undefined;
option.errorCallback = (option.errorCallback instanceof Function) ? option.errorCallback : undefined;
option.stillTime = isNaN(parseFloat(option.stillTime)) ? undefined : parseFloat(option.stillTime);
option.stepTime = isNaN(parseFloat(option.stepTime)) ? undefined : parseFloat(option.stepTime);
option.stepNum = isNaN(parseFloat(option.stepNum)) ? undefined :
(parseFloat(option.stepNum) > 100 ? 100 : parseFloat(option.stepNum) < 0 ? 0 : parseFloat(option.stepNum));
option.deadline = isNaN(parseFloat(option.deadline)) ? undefined :
(parseFloat(option.deadline) > 100 ? 100 : parseFloat(option.deadline) < 0 ? 0 : parseFloat(option.deadline));
option.duringTime = isNaN(parseFloat(option.duringTime)) ? undefined : parseFloat(option.duringTime);
return option;
}


//发送请求
ProcessedAjax.prototype.sendToServer = function() {
//$.ajaxBase(this.settings.type, this.settings.url, this.settings.data, this.successCallback.bind(this), this.defaultCallback.bind(this));
$.ajax({
type: this.settings.type,
url: this.settings.url,
data: this.settings.data,
dataType: "json",
error: this.successCallback.bind(this),
success: this.defaultCallback.bind(this),
async:true
});
this.showProcess();
this.setProcessInterval();
}


//显示进度条
ProcessedAjax.prototype.showProcess = function() {
$(".process-percent").remove();
var processDom =
"<div class='process-percent'>" +
" <div class='process-percent-back'></div>" +
" <div class='process-percent-ok' data-percent='0'></div>" +
"</div>";
if($(this.settings.container).length > 0) {
$(this.settings.container).append(processDom);
} else {
$("body").append(processDom);
}
this.percent = 0;
}


//销毁
ProcessedAjax.prototype.destroy = function() {
setTimeout(function(){
$(".process-percent").remove();
},600);
$(".process-percent").css({
"opacity": "0",
"transition": 'opacity .5s linear'
});
clearInterval(this.processInterval);
this.processInterval = null;
if(this.unrealDeadProcessInterval) {
clearInterval(this.unrealDeadProcessInterval);
this.unrealDeadProcessInterval=null;
}
}


//进度条改变定时器
ProcessedAjax.prototype.setProcessInterval = function() {
this.processInterval = setInterval(function() {
this.forwardProcess();
}.bind(this), this.settings.stepTime * 1000);
//随机假死进度条
this.unrealDeadProcess();
}


//进度条前进
ProcessedAjax.prototype.forwardProcess = function() {
//进度条前进的百分比大于等于成功前的最大百分比，卡死进度条
if(parseFloat(this.percent) >= parseFloat(this.settings.deadline)
|| (parseFloat(this.percent) + parseFloat(this.settings.stepNum)) >= parseFloat(this.settings.deadline)) {
this.deadProcess();
return;
}
this.setProcessPercent(parseFloat(this.settings.stepNum),.1);
}


//设置进度条百分比
ProcessedAjax.prototype.setProcessPercent = function(percent, time) {
this.percent=parseFloat(this.percent)+parseFloat(percent);
this.percent=parseFloat(this.percent)>100?100:parseFloat(this.percent);
$(".process-percent .process-percent-ok").attr("data-percent",this.percent);
var allWidth = $(".process-percent .process-percent-back").outerWidth(true);
$(".process-percent .process-percent-ok").css({
width: allWidth * (this.percent / 100),
transition: "width " + time + "s" + " linear"
});
}


//卡死进度条
ProcessedAjax.prototype.deadProcess = function(isError) {
clearInterval(this.processInterval);
this.processInterval = null;
if(isError) {//保证因为失败引起的卡死不会重启定时器
if(this.unrealDeadProcessInterval) {
clearInterval(this.unrealDeadProcessInterval);
this.unrealDeadProcessInterval=null;
}
}
}


无论如何走完进度条
ProcessedAjax.prototype.processToAllAnyway = function() {
this.setProcessPercent(100,.3);
}


//随机假死进度条，假死时间1-10s随机
ProcessedAjax.prototype.unrealDeadProcess = function() {
this.unrealDeadProcessInterval = setInterval(function() {
if(this.percent === 0) {


} else {
this.deadProcess();
clearInterval(this.unrealDeadProcessInterval);
this.unrealDeadProcessInterval=null;
this.reuseProcessInterval();
}
}.bind(this), this.getRandomNum(1,10)*1000);
}


//重启进度条前进定时器，前进百分比随机
ProcessedAjax.prototype.reuseProcessInterval = function() {
var addPercent=this.getRandomNum(0,100-parseFloat(this.percent));
this.setProcessPercent(addPercent, .3);
this.setProcessInterval();
}


//产生变化随机数
ProcessedAjax.prototype.getRandomNum = function(min,max) {
var numArea = max - min;//大小范围
var rand = Math.random();//随机数
return(min + Math.round(rand * numArea));
}


//成功的回调
ProcessedAjax.prototype.successCallback = function(data) {
this.processToAllAnyway();
setTimeout(function(){
this.settings.okCallback(data);
}.bind(this),500);


}


//失败的回调
ProcessedAjax.prototype.defaultCallback = function(data) {
this.deadProcess(true);
this.settings.errorCallback(data);
}

/*

个人原创，技术有限，不喜勿喷！

*/