记录一个前后台频繁交互（交互时间较长）导致的用户体验不佳问题的解决方案

此处要引一下bootstrap的包

版本好像是bootstrap3，

背景是一个批量下发的业务，用户选中要下发的业务之后、点击批量下发按钮会有很长一段时间的等待时间；

一位测试MM说：“交互时间太长了，我甚至不知道该等下去还是刷新页面了”

关于这个问题，

bootstrap3的进度条：

                    

                        

                            40% 完成
                        
                    
                    
                

Easy UI模态框：

    

        

            

                ×
                
                

                    提示
                
            
            

                
            
            

                
                    关闭
                
            
        
    

效果：

 

 

 

 

 

 想法比技术值钱系列：

下面的实现就毛毛雨了，简单说一下：

js：

if(strBatch){
            rowBatch=JSON.parse(strBatch);
            var times = rowBatch.length;
            //这里是个全局变量，最好不要这么做，应为我是改的别人的代码，不想动别人的入参
            processStrip = times;
            $("#task_fabu_modal").modal("hide");
            $("#myModal").modal("show");
            //每次执行前初始化进度条
            $("#progress_striped_strip").attr("style", "width: 1%;");
            //展示进度条效果
            $("#progress_striped").show();
            //清空提示语（防止脏数据）
            $("#message").html("");
            for (var index_ = 0; index_ < times; index_++) {
                $("#message").append((index_+1)+". 任务：" + rowBatch[index_].PENDING_TSK_NM + " 发布中···" +
                    "
");
            }
            //这个方法会在下面一段js里面贴出来
            pushFunc(times,rowBatch,isOk,audit) ;
            return;
        }

//param 详细参数就不拼了，后台接口也不再赘述
Util.ajax.postJsonM(Util.constants.CONTEXT + url,JSON.stringify(param),function(data){
            var indexIn = processStrip - times;
            if(data.STATUS == '0000' && data.RSP.RSP_CODE == '0000'){
                //业务下发成功
                times--;
                //进度条用这个办法low不？
                $("#progress_striped_strip").attr("style", "width: 100%;");
                if(times<=0){
                    //最后一条处理
                    $("#task_fabu_modal").modal("hide");
                    $("#"+idIndex+(indexIn)).html(" " + rows[indexIn].PENDING_TSK_NM + " "+alertTips);
                    localStorage.removeItem("checkPushBatch");
                }else{
                    //进行中的任务动态刷，主要针对可能出现的网络延迟以及业务量大
                    var process_ = (processStrip - times) * 100 / processStrip;
                    $("#progress_striped_strip").attr("style", "width: " + process_ + "%;");
                    $("#"+idIndex+(indexIn)).html(" " + rows[indexIn].PENDING_TSK_NM + " "+alertTips);
                    pushFunc(times,rows,isOk,audit);
                }
            } else{
                //业务下发失败的情况
                times--;
                if(times<=0){
                    $("#task_fabu_modal").modal("hide");
                    $("#progress_striped_strip").attr("style", "width: 100%;");
                    $("#"+idIndex+(indexIn)).html(" " + rows[indexIn].PENDING_TSK_NM + " 二审即发布失败!");
                    localStorage.removeItem("checkPushBatch");
                }else{
                    var process_ = (processStrip - times) * 100 / processStrip;
                    $("#progress_striped_strip").attr("style", "width: " + process_ + "%;");
                    $("#"+idIndex+(indexIn)).html("" + rows[indexIn].PENDING_TSK_NM + " 二审即发布失败!");
                    pushFunc(times,rows,isOk,audit);
                }
            }
        })

 

这个记录只是针对这个交互界面的想法，设计想法很赞，