ajax异步 数据保存和界面交互

Question

仅仅上传js代码 html没什么var $ = require('jquery');//jquery
    var config = require('config');//config配置
    var common = require('common');//公共common
    var cookies = require('cookies');//cookies
    var rankList_type=["余额排行榜","获得数量排行榜","获得次数排行榜","赠送数量排行榜","赠送次数排行榜"];//保存各种排行榜类型
  var rankListData=new Array();//保存各种排行榜数据（5种排行榜）
  var prizeData=new Array();//保存奖品数据
var  = '0';//区分是否是首次加
    /**********************************************排行榜数据展示部分****************************************************************/    /**
     * 排行榜数据展示(从服务器获取  填充DOM展示)
     * @param rankList_container         （jquery对象）根据克隆模板克隆出来的数据 显示在什么地方  rankList_container 数据容器
     * @param rankList_clone_Template    （jquery对象）克隆模板
     * @param timeMark                  （字符串）时间维度标识
     * @param typeMark                 （字符串）类型维度标识
     * @param page                     （Number)页码
     */
    var show_rankList=function(rankList_container,rankList_clone_Template,timeMark,typeMark,page){
        $.post(config.theChartsTop,{
            timeMark : timeMark,
            typeMark : typeMark,
            page : page
        },function(data){
            if(data.result == "1") {
               //alert("成功获取数据"); //数据成功返回
                rankListData=data.list;
                $.each(rankListData,function(index,infoDTO){
                    alert(infoDTO.sender.id);
                });
    packing_rankList(rankList_container,rankList_clone_Template,rankListData,1);//数据拼装展示
    setTimeout(function(){removeAndShow(rankList_container)},5000);//移除显示的6条数据  显示剩下的4条数据
    
            }else if(data.result=="0"){
               alert("请求失败="+data.message);//失败原因
            }else if(data.result=="-1"){
               alert("请求异常"+data.message);//异常信息
            }
            if( == '0'){
             setTimeout(function(){changeData(1,"WEEK","GET_NUMBER")},8000);      //获得数量排行榜
              = '1';
            }else if( =="1"){
             setTimeout(function(){changeData(1,"WEEK","GET_COUNT")},8000);      //获得次数排行榜
              = '2';
            }else if( =="2"){
             setTimeout(function(){changeData(1,"WEEK","GIVE_NUMBER")},8000);      //赠送数量排行榜
              = '3';
            }else if( =="3"){
             setTimeout(function(){changeData(1,"WEEK","GIVE_COUNT")},5000);      //赠送次数排行榜
              = '4';
            }
            
        },"json");
        
    }    function test(){
    
    }
    /**
     * 排行榜数据拼装显示
     * @param rankList_container      （jquery对象）根据克隆模板克隆出来的数据 显示在什么地方  to_container 数据容器
     * @param rankList_clone_Template （jquery对象）克隆模板
     * @param dataArray                需要遍历的数组(数组里填充排行榜数据)
     * @param page                     页码
     */
    var packing_rankList=function(rankList_container,rankList_clone_Template,dataArray,page){
        //数据拼装
        if(dataArray.length!=0){
            /*
             * index 数组下标
             * infoDTO 数组元素
             */
            $.each(dataArray,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标识
                if(index<6){
                    rankList_clone.css("display","block");//显示6条
                }else{
                    rankList_clone.css("display","none");//隐藏4条
                }
//                rankList_container.append(rankList_clone);//将克隆的数据放入容器
                rankList_clone_Template.before(rankList_clone);            });        }else{
         alert("未获取到数据");
        }    }
    /**
     * 移除界面显示的数据  显示剩下的数据（从服务器返回的数据）
     * @param rankList_container 数据容器
     */
    var removeAndShow=function (rankList_container){
        rankList_container.find(":visible").hide().remove();
        //rankList_container.find(":hidden").show("slow");//这样判断会将模板包含进去
        rankList_container.find("div[id^='clone_rank_']").show();//将剩下隐藏的数据显示出来
        setTimeout(function(){removeOther(rankList_container)},1000);
        
        
        function removeOther(rankList_container){
         rankList_container.find("div[id^='clone_rank_']").remove();
        }
    }    /**
     * 排行榜程序调用入口
      * @param refreshTime  数据刷新时间
     */
    exports.change_rankList=function(refreshTime){
    
    
     changeData(0,"WEEK","");//初始化显示余额排行榜
    
//        setTimeout(function(){changeData(0,"WEEK","")},refreshTime);          //余额排行榜
//        setTimeout(function(){changeData(1,"WEEK","GET_NUMBER")},refreshTime);      //获得数量排行榜
//        setTimeout(function(){changeData(2,"WEEK","GET_COUNT")},refreshTime);       //获得次数排行榜
//        setTimeout(function(){changeData(3,"WEEK","GIVE_NUMBER")},refreshTime);     //赠送数量排行榜
//        setTimeout(function(){changeData(4,"WEEK","GIVE_COUNT")},refreshTime);      //赠送次数排行榜
//        exports.change_rankList(refreshTime);//递归调用
    }    /**
     * 排行榜数据切换
     * @param index        排行榜类型在数组中的下标
     * @param timeMark     时间维度标识
     * @param typeMark     类型维度标识
     */
    var changeData=function(index,timeMark,typeMark){
     $("#rankList_type").html(rankList_type[index]);
        show_rankList($("#rankList_container"),$("#rankList_clone_Template"),timeMark,typeMark,1);
       
    }
代码是部分的 seaJs 核心代码是一样的.需求这样的，就是循环数据展示排行榜信息展示
【注】后台数据现在是返回10条数据  每次请求都是一个接口 只是参数传递不同  参数传递不同 意味着就是不同的排行帮类型
时间  a
显示效果 初始化
1.显示     余额排行榜前6条数据
2. 过a时间 余额排行榜剩下的4条数据       <余额>3. 过a时间  显示获得数量排行榜前6条数据
4. 过a时间  显示获得数量排行榜剩下的4条数据 <获得数量>5. 过a时间  显示获得次数排行榜前6条数据
6. 过a时间  显示获得次数排行榜剩下4条数据 <获得次数>7. 过a时间  显示赠送数量排行榜前6条数据
8. 过a时间  显示赠送数量排行榜剩下4条数据 <赠送数量>9. 过a时间  显示赠送次数排行榜前6条数据
10. 过a时间  显示赠送次数排行榜剩下4条数据 <赠送次数>11. 过a时间 回到1 重新开始 如果按照我那样写，时间上就差别，调整，并且中间会出现等待情况，页面数据清空了。 1天多了，想不到解决方法，在论坛上问问。核心问题就是ajax异步，在返回时用全局数据保存，我在其他地方用全局数据的时候，怎样保存全局数据里面有值，可能这个问题很多人遇到过了吧ajaxjquery数据保存  界面交互

Answer 1

setTimeout(function(){xxxx},5000);
setTimeout(function(){xxxx},8000);
你什么用setTimeout 

Answer 2

给多少时间显示下一组要显示的数据 这里没想到用setIn..  我问题的核心不在这里

Answer 3

setTimeout惹的祸，建议楼主使用触发器的思想，当下一批数据查询完成后，再清除上一批数据。

Answer 4

调用函数写在ajax回调里就好了

Answer 5

var getDataArray=new Array();      //保存返回的5种排行榜数据
    var showDataArray=new Array();     //展示数据array
    var dataArray=new Array();     //展示数据array
var all_isRetrun=false;         //5种排行是否全部返回
 isRerturn=0; var showMark=0;
var rank_typeArray=["余额排行榜","获得数量排行榜","获得次数排行榜","赠送数量排行榜","赠送次数排行榜"];
exports.init=function(){
get_data();
setTimeout(showData,0);
// showData();
setInterval(get_data,60000);

}
//请求数据
var fngetdata=function(timeMark,typeMark){
    $.post(config.theChartsTop,{timeMark:timeMark,typeMark:typeMark,page:1},function(data){
        if(data.result=='1'){
         isRerturn+=1;
            getDataArray.push(paking_div(data.list));//组装数据放在数
        }
    },"json");

}

//请求一轮数据 5种排行
var get_data=function(){
     fngetdata("WEEK","");
     fngetdata("WEEK","GET_NUMBER");
     fngetdata("WEEK","GET_COUNT");
     fngetdata("WEEK","GIVE_NUMBER");
     fngetdata("WEEK","GIVE_COUNT");
     fnshow();
}

//组装数据
var paking_div=function(data){
var $pakingDiv=$("<div></div>");
$.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标识
        if(index<6){
                rankList_clone.css("display","block");//显示6条
            }else{
                rankList_clone.css("display","none");//隐藏4条
            }
        $pakingDiv.append(rankList_clone);
});
        return $pakingDiv;
}

//定时从showDataArray中取数据
var fnshow=function(){
setInterval(function(){
//数据已经返回
     if(isRerturn==5){
//     alert("数据返回完");
     //showDataArray=getDataArray.slice(0);
     isRerturn=0;
     showMark=1;//可以显示
     }
     },1000);
}

var showData=function(){
//1.判断是否有可现实的数据   (如果没有可显示的数据  3秒钟再进行判断  有可显示的数据 则跳过)
setInterval(copeData,1000);
setInterval(show,5000);
//2.可显示的时候 数据数据 3
//3.循环数据 显示数据
//
}

var copeData=function(){
if(showMark==1){
    dataArray=getDataArray.slice(0);
showDataArray=getDataArray.slice(0);//数组cope
   }
// show();
}
//从数组中取得数据并显示
var show=function(){
// if (showDataArray.length == 0) {
// showDataArray=getDataArray.slice(0);
// }
if(showMark==0){
return;
}
showMark=2;
// for(var i=0;i<showDataArray.length;i++){
$("#show").html("");//在添加数据之前删除div中的数据
$("#show").append(showDataArray[0]);//初始化显示余额排行
$("#rankList_type").html(rank_typeArray[0]);
rank_typeArray.shift();
showDataArray.shift();//始终删除数组第一条数据
if(showDataArray.length == 0){
showDataArray=dataArray.slice(0);//数组cope
rank_typeArray=["余额排行榜","获得数量排行榜","获得次数排行榜","赠送数量排行榜","赠送次数排行榜"];
}
// setTimeout(sh,50000);//5秒钟是 6条数据和4条数据的切换时间
// }

  }

/*每次取得了10条数据 6条显示 4条隐藏*/
function sh(){
// alert(1213);
$("#rank >div").toggle();//隐藏显示的  显示隐藏的

   }
2天了 公司老程序员 帮忙弄了点  感觉压力真大，我觉得你们可能把他想的太简单了。我到现在还没怎么看明白  综合的来说就是 取数据 和显示数据 关联并不大 类似java中的线程控制