var rank_typeArray=new Array(); //保存5种排行数据类型名称
var rank_getDataArray=new Array(); //保存从服务器获取的5种排行榜数据
var rank_showDataArray=new Array(); //保存界面要展示的排行榜数据
var rank_middleDataArray=new Array();//中间数据过渡 var rankMark_dataHasAllReturn=0; //标记 5种排行是否已全部返回 0未返回 5已返回
var rankMark_visible=0; /**
* 排行榜数据展示入口
*/
exports.rank_init=function(){
rank_getAllData();
// setTimeout(rank_showData,0);
rank_showData();
setInterval(rank_getAllData,1800000);//30分钟从服务器刷新一次数据
} /**
* 请求一轮 5种排行榜数据
*/
var rank_getAllData=function(){
rank_getData("WEEK",""); //余额排行榜
rank_getData("WEEK","GET_NUMBER"); //获得数量排行榜
rank_getData("WEEK","GET_COUNT"); //获得次数排行榜
rank_getData("WEEK","GIVE_NUMBER"); //赠送数量排行榜
rank_getData("WEEK","GIVE_COUNT"); //赠送次数排行榜
rank_checkData();
} /**
* ajax从服务器获取排行榜数据 经封装 按照一定顺序放入数组rank_getDataArray
*/
var rank_getData=function(timeMark,typeMark){
$.post(config.rankInformation_show,{
timeMark:timeMark,
typeMark:typeMark,
page:1
},function(data){
if(data.result=='1'){
rankMark_dataHasAllReturn+=1; //改变 是否全部返回标记
if(typeMark=="GET_NUMBER"){
rank_getDataArray[1]=rank_packData(data.list).slice(0);
rank_typeArray[1]="获得数量排行榜";
}else if(typeMark=="GET_COUNT"){
rank_getDataArray[2]=rank_packData(data.list).slice(0);
rank_typeArray[2]="获得次数排行榜";
}else if(typeMark=="GIVE_NUMBER"){
rank_getDataArray[3]=rank_packData(data.list).slice(0);
rank_typeArray[3]="赠送数量排行榜";
}else if(typeMark=="GIVE_COUNT"){
rank_getDataArray[4]=rank_packData(data.list).slice(0);
rank_typeArray[4]="赠送次数排行榜";
}else{
rank_getDataArray[0]=rank_packData(data.list).slice(0);
rank_typeArray[0]="余额排行榜";
}
}else if(data.result=='0'){
alert("请求失败:"+data.message);
}else if(data.result=='-1'){
alert("发生异常:"+data.message);
}
},"json"); } /**
* 组装返回的json数据
*/
var rank_packData=function(data){
var pakedData_div=new Array();
$.each(data,function(index,infoDTO){
var rankList_clone=$("#rankList_clone_Template").clone(true);
rankList_clone.find("#head_portrait").attr('src',"/servlet/getImage?filename=" + infoDTO.sender.picture + "&type=3"); //大头像
rankList_clone.find("#name").html(infoDTO.sender.name); //姓名
rankList_clone.find("#department").html(infoDTO.sender.departmentName); //所在部门
rankList_clone.find("#balance").html(infoDTO.count); //虚拟币余额
rankList_clone.find("#ranking_list").html(index+1); //排行名次
rankList_clone.attr("id","clone_rank_"+(index+1)); //克隆数据的id标识
rankList_clone.css("display","block");
pakedData_div.push(rankList_clone);
});
return pakedData_div;
} /**
* 验证数据是否成功返回 是否有供显示的数据
*/
var rank_checkData=function(){
setInterval(function(){
if(rankMark_dataHasAllReturn==5){
//alert("数据已全部返回");
rankMark_dataHasAllReturn=0; //重置 是否全部返回标记
rankMark_visible=1;//有可供显示的新数据
}
},1000);
} /**
* 展示排行榜数据
*/
var rank_showData=function(){
setInterval(copeRankData,2000);
setInterval(rank_show2,5000);//5秒滚动一次
}
/**
* 从rank_getDataArray中cope数据到 rank_showDataArray rank_middleDataArray
*/
var copeRankData=function(){
if(rankMark_visible==1){
rank_showDataArray=rank_getDataArray.slice(0);
rank_middleDataArray=rank_getDataArray.slice(0);
rankMark_visible=2;//标识 有数据可供取出展示
}
}
var isScroll=true;//true 从数组取出数据 填充DOM false滚动
var rankData_length;//从服务器返回的每种排行榜的数据量
var scrollToalNumber;//本种排行榜需要滚动的次数
var scrollNumber=0;//记录本种排行榜当前滚动的次数
var rank_show2=function(){
if(rankMark_visible==0||rankMark_visible==1){
return;//只有 rankMark_visible=2 才是数据可显示的状态
}
if(isScroll){
//一轮数据展示完 重新来过
if(rank_showDataArray.length==0){
alert("一轮数据切换完毕 从middle数组Cope");
rank_showDataArray=rank_middleDataArray.slice(0);
rank_typeArray=["余额排行榜","获得数量排行榜","获得次数排行榜","赠送数量排行榜","赠送次数排行榜"];
}
$("#show_rank").html("");//每次切换类型 清空DOM
$("#show_rank").css("left","0px");//重置div的位置
$("#rank_type").html(rank_typeArray[0]);//改变排行榜类型名称 $.each(rank_showDataArray[0],function(k,v){
$("#show_rank").append(v); //将数据假如DOM
}); rankData_length=rank_showDataArray[0].length;
if(rankData_length>6){
// $("#show_rank").width(rankData_length*226);//调整show_rank的宽度
scrollToalNumber=rankData_length-6;
// alert("需要滚动的次数:"+scrollToalNumber);
}
isScroll=false;//再次进来的时候就不需要放入数据 直接滚动
}else{
// $.each(rank_middleDataArray[0],function(k,v){
// alert(v.html());
// });
if(rankData_length<=6){
//alert("数据量小于6 不滚动 等20秒直接切换到下一种排行");
setTimeout(function(){
rank_showDataArray.shift();
rank_typeArray.shift();
isScroll=true;
},20000);
}else{
$("#show_rank").animate({left:"-=226px"});
scrollNumber+=1;
// alert("滚动次数:"+scrollNumber);
if(scrollNumber==scrollToalNumber){
scrollNumber=0; //重置计数器
rank_showDataArray.shift();//每次删除第一个排行榜数据
rank_typeArray.shift();//每次删除第一种排行榜类型
isScroll=true;
}
}
}
}
当5轮显示完了以后 在firefox chrome 360 下都可以,从middle数组cope数据继续展示,只有在IE下也去做的这些事情,但是从数组中取到的数据仅仅是clone的div,div里面没内容,后来我调试发现,当第一次把余额排行榜显示完了以后,中间数组(余额排行榜)的数据就变成10个div了,但是里面没内容
var rank_getDataArray=new Array(); //保存从服务器获取的5种排行榜数据
var rank_showDataArray=new Array(); //保存界面要展示的排行榜数据
var rank_middleDataArray=new Array();//中间数据过渡 var rankMark_dataHasAllReturn=0; //标记 5种排行是否已全部返回 0未返回 5已返回
var rankMark_visible=0; /**
* 排行榜数据展示入口
*/
exports.rank_init=function(){
rank_getAllData();
// setTimeout(rank_showData,0);
rank_showData();
setInterval(rank_getAllData,1800000);//30分钟从服务器刷新一次数据
} /**
* 请求一轮 5种排行榜数据
*/
var rank_getAllData=function(){
rank_getData("WEEK",""); //余额排行榜
rank_getData("WEEK","GET_NUMBER"); //获得数量排行榜
rank_getData("WEEK","GET_COUNT"); //获得次数排行榜
rank_getData("WEEK","GIVE_NUMBER"); //赠送数量排行榜
rank_getData("WEEK","GIVE_COUNT"); //赠送次数排行榜
rank_checkData();
} /**
* ajax从服务器获取排行榜数据 经封装 按照一定顺序放入数组rank_getDataArray
*/
var rank_getData=function(timeMark,typeMark){
$.post(config.rankInformation_show,{
timeMark:timeMark,
typeMark:typeMark,
page:1
},function(data){
if(data.result=='1'){
rankMark_dataHasAllReturn+=1; //改变 是否全部返回标记
if(typeMark=="GET_NUMBER"){
rank_getDataArray[1]=rank_packData(data.list).slice(0);
rank_typeArray[1]="获得数量排行榜";
}else if(typeMark=="GET_COUNT"){
rank_getDataArray[2]=rank_packData(data.list).slice(0);
rank_typeArray[2]="获得次数排行榜";
}else if(typeMark=="GIVE_NUMBER"){
rank_getDataArray[3]=rank_packData(data.list).slice(0);
rank_typeArray[3]="赠送数量排行榜";
}else if(typeMark=="GIVE_COUNT"){
rank_getDataArray[4]=rank_packData(data.list).slice(0);
rank_typeArray[4]="赠送次数排行榜";
}else{
rank_getDataArray[0]=rank_packData(data.list).slice(0);
rank_typeArray[0]="余额排行榜";
}
}else if(data.result=='0'){
alert("请求失败:"+data.message);
}else if(data.result=='-1'){
alert("发生异常:"+data.message);
}
},"json"); } /**
* 组装返回的json数据
*/
var rank_packData=function(data){
var pakedData_div=new Array();
$.each(data,function(index,infoDTO){
var rankList_clone=$("#rankList_clone_Template").clone(true);
rankList_clone.find("#head_portrait").attr('src',"/servlet/getImage?filename=" + infoDTO.sender.picture + "&type=3"); //大头像
rankList_clone.find("#name").html(infoDTO.sender.name); //姓名
rankList_clone.find("#department").html(infoDTO.sender.departmentName); //所在部门
rankList_clone.find("#balance").html(infoDTO.count); //虚拟币余额
rankList_clone.find("#ranking_list").html(index+1); //排行名次
rankList_clone.attr("id","clone_rank_"+(index+1)); //克隆数据的id标识
rankList_clone.css("display","block");
pakedData_div.push(rankList_clone);
});
return pakedData_div;
} /**
* 验证数据是否成功返回 是否有供显示的数据
*/
var rank_checkData=function(){
setInterval(function(){
if(rankMark_dataHasAllReturn==5){
//alert("数据已全部返回");
rankMark_dataHasAllReturn=0; //重置 是否全部返回标记
rankMark_visible=1;//有可供显示的新数据
}
},1000);
} /**
* 展示排行榜数据
*/
var rank_showData=function(){
setInterval(copeRankData,2000);
setInterval(rank_show2,5000);//5秒滚动一次
}
/**
* 从rank_getDataArray中cope数据到 rank_showDataArray rank_middleDataArray
*/
var copeRankData=function(){
if(rankMark_visible==1){
rank_showDataArray=rank_getDataArray.slice(0);
rank_middleDataArray=rank_getDataArray.slice(0);
rankMark_visible=2;//标识 有数据可供取出展示
}
}
var isScroll=true;//true 从数组取出数据 填充DOM false滚动
var rankData_length;//从服务器返回的每种排行榜的数据量
var scrollToalNumber;//本种排行榜需要滚动的次数
var scrollNumber=0;//记录本种排行榜当前滚动的次数
var rank_show2=function(){
if(rankMark_visible==0||rankMark_visible==1){
return;//只有 rankMark_visible=2 才是数据可显示的状态
}
if(isScroll){
//一轮数据展示完 重新来过
if(rank_showDataArray.length==0){
alert("一轮数据切换完毕 从middle数组Cope");
rank_showDataArray=rank_middleDataArray.slice(0);
rank_typeArray=["余额排行榜","获得数量排行榜","获得次数排行榜","赠送数量排行榜","赠送次数排行榜"];
}
$("#show_rank").html("");//每次切换类型 清空DOM
$("#show_rank").css("left","0px");//重置div的位置
$("#rank_type").html(rank_typeArray[0]);//改变排行榜类型名称 $.each(rank_showDataArray[0],function(k,v){
$("#show_rank").append(v); //将数据假如DOM
}); rankData_length=rank_showDataArray[0].length;
if(rankData_length>6){
// $("#show_rank").width(rankData_length*226);//调整show_rank的宽度
scrollToalNumber=rankData_length-6;
// alert("需要滚动的次数:"+scrollToalNumber);
}
isScroll=false;//再次进来的时候就不需要放入数据 直接滚动
}else{
// $.each(rank_middleDataArray[0],function(k,v){
// alert(v.html());
// });
if(rankData_length<=6){
//alert("数据量小于6 不滚动 等20秒直接切换到下一种排行");
setTimeout(function(){
rank_showDataArray.shift();
rank_typeArray.shift();
isScroll=true;
},20000);
}else{
$("#show_rank").animate({left:"-=226px"});
scrollNumber+=1;
// alert("滚动次数:"+scrollNumber);
if(scrollNumber==scrollToalNumber){
scrollNumber=0; //重置计数器
rank_showDataArray.shift();//每次删除第一个排行榜数据
rank_typeArray.shift();//每次删除第一种排行榜类型
isScroll=true;
}
}
}
}
当5轮显示完了以后 在firefox chrome 360 下都可以,从middle数组cope数据继续展示,只有在IE下也去做的这些事情,但是从数组中取到的数据仅仅是clone的div,div里面没内容,后来我调试发现,当第一次把余额排行榜显示完了以后,中间数组(余额排行榜)的数据就变成10个div了,但是里面没内容
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货