Js实现短信发送进度条

文章中进度条用到了easyUI的$.messager.progress控件，这里主要讲述进度条实时显示进度的实现。

要实现功能如下：

点击发送短信按钮，然后在进度条中实时显示发送进度。另外还实现了重发发送失败的短信

实现原理如下：

首先向服务器发起一个请求，这个请求主要是用来进行短信的发送，在服务器端记录下已发送的短信条数，然后客户端每隔一段时间去请求这个记录已经发送短信条数的变量，这样就可以把这个变量实时的反馈到进度条上了。

实现代码：

用于处理进度条的函数：

function setSendSMSProgress(phoneLength,progressBar){
	return function(){
		$.ajax({
			url:_rootPath + ‘api/sms/GetSentSMSCount‘,
			type:‘GET‘,
			beforeSend:function(){
			},
			success:function(data){
	            if(parseInt(data) <= phoneLength){
					var value = parseInt(parseInt(data) / phoneLength * 100);
					progressBar.progressbar(‘setValue‘,value);
	            }else{
	                //alert("发送完毕");
	            }
			},
			error:function(){
				console.log(‘error‘);
			}
		})
	}
}

function sendSMS(phones,content){
	var me = arguments.callee;
	if (phones.length == 0 || content.trim() == "") {
		$.messager.alert(‘提醒‘,‘请选择党员并输入内容！‘);
		//alert(‘请选择党员并输入内容！‘);
	} else {
		var intervalId = null;
		var progressBar = null;
		var options = {
			type: ‘post‘,
			contentType: ‘application/json‘,
			dataType: ‘json‘,
			url: _rootPath + ‘api/sms/PutSendSMS‘,
			data: JSON.stringify({
				content: content,
				phones: phones
			}),
			beforeSend:function(){
				var phoneLength = phones.length;
				$.messager.progress({
					title:‘请稍后‘,
					msg:‘正在发送短信......‘,
					interval:0
				});
				progressBar = $.messager.progress(‘bar‘);
				intervalId = setInterval(setSendSMSProgress(phoneLength,progressBar),500);
			},
			complete:function(){                                   
				clearInterval(intervalId);
				if(progressBar != null){
					progressBar.progressbar("setValue",100);	
				}
				setTimeout(function(){
					$.messager.progress(‘close‘);
				},800)
			},
			success: function(data) {
				var failArr = [];
				var successArr = [];
				for(var i = 0 ; i < data.length; i++){
					if(data[i] != ‘1100‘){
						failArr.push(data[i]);
					}else{
						successArr.push(data[i]);
					}
				}
				if(failArr.length === 0){
					setTimeout(function(){
						$.messager.alert(‘消息‘,‘短信发送成功‘);
					},500);					
					$(‘#member_msg_dlg‘).dialog(‘close‘);
				}else{
					setTimeout(function(){
						$.messager.confirm(‘消息‘, ‘成功‘+ successArr.length + ‘条，失败‘ +failArr.length+‘条，重新发送失败短信？‘, function(ok){
							if (ok){
								me(failArr,content);
							}else{
								$(‘#member_msg_dlg‘).dialog(‘close‘);
							}
						});
					},500)
				}
			},
			error: function(data) {
				alert(‘发送失败‘);
			},
		};
		$.ajax(options);
	}
}