关键是setInterval无法传递参数,所以用了匿名函数再包裹一下就好了。

//重置发布进度
    function resetPercent(id_data){
        $.ajax({
              url:'/autodeploy/reset_percent/' + id_data,
              success: function(json){
                },
            });
    };
    //间隔刷新,显示百分比,AJAX调用rest_framework框架
    var _interval = {};

    function showPercent(id_data){
        //var _interval;
        var percent_value;
        var id_subserver = id_data.split("-")[0]

        $.getJSON("/api/subserver/" + id_subserver,
            function(data,state){
                if (state == 'success') {
                    percent_value_array = data.deploy_status.split(",");
                    percent_value = percent_value_array[0];
                    cmd_value = percent_value_array[1];
                    $('#' + id_data).html("<div class='uk-progress uk-progress-striped uk-progress-active'><div class='uk-progress-bar' style='width: " + percent_value + "%;'>" +  cmd_value + ' ' + percent_value + "%</div><i class='uk-icon-cog uk-icon-spin'></i></div>");
                     console.log(percent_value[0])
                        if ( percent_value != 100 ){
                            //_interval = setInterval(showPercent(id_data), 3000);
                        } else {
                             clearInterval(_interval[id_data]);
                             $('#' + id_data).html("<div class='uk-progress uk-progress-striped uk-progress-success'><div class='uk-progress-bar' style='width: " + percent_value + "%;'>100%</div></div>");
                        };

                    };
            }
        );
    };

    $(".btn-multi-deploy").click(function(){
          var deploypool_id =  $(this).attr("deploypool_id")
          var group_data = $("#deploy-form" + deploypool_id).serialize()
          var deploy_type = $(this).attr("deploy_type")
          var _self = this;

          console.log(deploypool_id, group_data)

          //因为涉及到模态对话态中的AJAX输出ID定位,所以用了两个数组来重置更新进度和刷新百分比。可以优化。
          var id_array = []
          var id_s_array = []
          var group_array = group_data.split("&");
          for (var key_data in group_array) {
            if (group_array[key_data].indexOf("select-deployversion") != -1) {
                deploy_id = group_array[key_data].split("=")[1]
            };
            if (group_array[key_data].indexOf("check-server") != -1) {
                id_s_array.push(group_array[key_data].split("=")[1])
                id_array.push(group_array[key_data].split("=")[1] + "-" +deploy_id)

            };
          };

          promiseDEPLOY = $.ajax({
            url:'{% url "autodeploy:group-cmd" %}',
            type: 'post',
            data:{
                group_data: group_data,
                deploy_type: deploy_type,
            },
            dataType: 'json',
            beforeSend: function(){
                result_output = $(_self).siblings("p.result_output");
                result_output_desc = $(_self).siblings("p.result_output_desc");
                $(_self).attr('disabled',"true");
                $(_self).append(" <i class='uk-icon-cog uk-icon-spin'></i>");
                result_output_desc.append(" <strong>集群发布中,请耐心等候....</strong>");
                // result_output.html("<div >集群发布中,请耐心等候....</div>");
                //发送前重置
        for( index=0;index < id_s_array.length;index++){
                    resetPercent(id_s_array[index]);
                }
            },
            success: function(json){
                $(_self).children('i').remove();
                $(_self).append(" <i class='uk-icon-check'></i>")
                result_output_desc.append("<span class='uk-text-success'><i class='uk-icon-check'></i></span>");
                result_output_desc.append("<span class='uk-text-success'>异步队列分发完成,每个服务器开始更新。</span>");
                //发送后获取进度

         for( index=0;index < id_array.length;index++){
            var key = id_array[index];
                    //_interval = setInterval(function(){showPercent(key)}, 3000);
            _interval[key] = setInterval(function(){showPercent(key);}, 3000);
                }
        },
            error: function(){
                result_output_desc.append("<span class='uk-text-muted'><br>服务器内部错误 </span>");
                result_output_desc.append("<span class='uk-text-danger'><i class='uk-icon-remove'></i></span>");
                $(_self).children('i').remove();
                result_output.html("<div ></div>");
            },
            complete: function(){
            }
        });/* end cmd-run stop */
    });

上次的AJAX定时刷新多ID不正确,这次请教了高手之后补全的更多相关文章

  1. jQuery实现AJAX定时刷新局部页面实例

    本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax ...

  2. 【jQuery】: 定时刷新页面

    <%@page import="qflag.ucstar.seatmonitor.manager.SeatMonitorManager"%><%@ page la ...

  3. 使用ajax+php+mysql实现数据库定时刷新

    php版本5.5.9,mysql版本5.7. 所以php链接mysql就是使用mysql_connect. 如果遇到了连接时没有成功也没有失败的情况时,就重启mysql,或重启docker(睡一觉就好 ...

  4. Ajax定时局部刷新

    1.局部刷新一个地方 function refreshOnTime(){ $.ajax({ //配置 }); //7秒后重复执行该函数 setInterval('refreshOnTime', 700 ...

  5. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  6. Ajax回退刷新页面问题的解决办法

    在脚本之家看到一篇文章,觉得以后可能会用上,但是竟然不能收藏,所以只能将其转到博客园. 以下是原文地址: http://www.jb51.net/article/87856.htm   这篇文章主要介 ...

  7. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  8. Ajax无刷新提交

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

随机推荐

  1. 【转】BUG敏感度的培养

    在我们刚踏入软件测试行业时,不管你是专业的.非专业的,培训出来的还是未培训的.刚进公司时你看着身边的同时报的Bug很多并且大都是严重程度高,自己也很想提高一下,想要提高自己的bug敏感度,建议从下面几 ...

  2. 【linux操作命令】vim

    高级一些的编辑器,都会包含宏功能,vim当然不能缺少了,在vim中使用宏是非常方便的: :qx     开始记录宏,并将结果存入寄存器x q     退出记录模式 @x     播放记录在x寄存器中的 ...

  3. 【JAVA】抽象类

    一.什么是抽象类 用abstract修饰的类就是抽象类.抽象类中可以有用abstract修饰的抽象方法,也可以没有抽象方法. 二.为什么要设计抽象类 在某些情况下,某个父类只是知道其子类应该包含怎样的 ...

  4. 12天学好C语言——记录我的C语言学习之路(Day 3)

    12天学好C语言--记录我的C语言学习之路 Day 3: 不知不觉到了第三天的学习,我们前两天学习的东西很杂乱,各个方面都有学习.我觉得这不是不系统,也不是学的不扎实,这种学习对于初学者而言我认为是很 ...

  5. java之多态的使用

    首先,什么是多态?我们应该从什么角度来理解多态?其实,我们不妨把多态理解成一种事物的多种存在形态,比如,猫和狗都可以变成动物,而动物又可以变成猫和狗. 为了充分理解多态,我们可以从以下这几个方面来理解 ...

  6. Tian Ji -- The Horse Racing

    Tian Ji -- The Horse Racing Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Jav ...

  7. html常用单词和各种少见标签

    常用单词: 空格  align="left"valign="top"align="center"valign="middle&qu ...

  8. JavaScript 对象的几种创建方法

    /** * Created by 2016 on 2016/6/4. */ function Box(){ var obj = new obj(); obj.name = "Lee" ...

  9. 路由器无线桥接 router wireless bridge

    实验环境:TP-Link A,TP-Link B,两个路由器都有子网,分别为子网 A,子网 B.TP-Link A连接学校子网 IP A,TP-Link B连接学校子网 IP B.两个路由器都能够通过 ...

  10. JSON对象的stringify()和parse()方法

    1.stringify() ---- JavaScript对象序列化为JSON字符串 eg1. var book = {title: 'JS', authors: ['Van'], edition:3 ...