jQuery 进度条

HTML代码

<!-- panel right for batch command result-->
<div class="result">
    <div class="panel-heading">
        <h3 class="panel-title">Result</h3>
    </div>
    <div class="panel-body">
        <div class="progress hide">
            <div id="task_progress" style="width: 0%;" class="progress-bar progress-bar-info"></div>
        </div>
        <!--Large modal button-->
        <div id="task_result" class="form-control" style="min-height: 200px"></div>
    </div>
</div>

jQuery代码

// Ajax获取执行结果
function  GetTaskResult(task_id){
    $.getJSON("{% url 'task_result' %}",{'task_id':task_id},function(callback){
        var result_ele = "";
        var res_status = {
            0:'成功',
            1:'失败',
            3:'超时',
            2:'执行中'
        };

        // 所有任务已执行
        var all_task_done = true;

        // 进度条实现
        var finished_task_counter = 0 ;
        $.each(callback,function (index,i) {
                // 字符串拼接
                var single_res_title = "<p>"+ i.host__hostname + "(" +i.host__manage_ip +")" +
                        "-----------------" + res_status[i.status] +"</p>";
                var single_res_body = "<pre>" + i.result +"</pre>";
                var single_res = single_res_title + single_res_body;
                result_ele += single_res;

                // 任务还在执行中
                if ( i.status == 2){
                    all_task_done = false
                // 执行完成
                }else {
                    finished_task_counter += 1
                }
        });

        //代表所有任务都执行完了
        if (all_task_done){
            // 清除定时器
            clearInterval(get_result_timer);
        }
        
        // 实现进度条功能
        var finished_percent = parseInt(finished_task_counter / callback.length*100);
        // 默认隐藏进度条
        $("#task_progress").parent().removeClass("hide");
        // 打印进度条
        $("#task_progress").css("width", finished_percent+"%").text(finished_percent+"%");
        
        // 执行结果回写
        $("#task_result").html(result_ele);

    });//end getJSON
}