jq使用easyui的Progressbar进度条

controlProgressBar方法逻辑：

第一个if判断：参数为"none"时进这儿，传"none"值表示进度条一定存在，这里是想让进度条隐藏

第二个if判断：参数为"block"+进度条dom存在时进这儿，表示想让进度条显示，只需要改变其display属性

第三个判断：参数为"block"+进度条不存在时进这儿，不存在进度条dom要将dom元素添加进页面

//控制进度条的显示与隐藏 传值"none"/"block"
function controlProgressBar(status){
  var ele = "progressOverlay";
  var dom =
    document.getElementById(ele) ||
    window.parent.document.getElementById(ele) ||
    window.parent.parent.document.getElementById(ele) ||
    window.top.document.getElementById(ele) ||
    $("iframe")
      .contents()
      .find("#" + ele)[0];
  if (status === "none") {
    $("#progressBar").progressbar("setValue",100)
    progressTimer && clearInterval(progressTimer)
    // 查询渲染完成 进度条隐藏
    setTimeout(()=>{
      dom.style.display = status;
    },200)
  }else if(dom){
    // 查询渲染开始 显示进度条 并从0开始
    dom.style.display = status;
    $("#progressBar").progressbar("setValue",0)
    // 获取进度条当前值
    let progressValue = $("#progressBar").progressbar("getValue");
    progressTimer && clearInterval(progressTimer)
    progressTimer = setInterval(()=>{
      if(progressValue < 90){
        progressValue += Math.floor(Math.random() * 10);
        progressValue = progressValue >= 100? 99:progressValue
        // 设置进度条当前值
        $("#progressBar").progressbar("setValue",progressValue)
      }else{
        clearInterval(progressTimer)
      }
    },200)
  }else{
    // 进度条没被渲染过
    var loadingHtml = `<div id="progressOverlay" class="progressOverlay pageOverlay">
                  <div class="progressOverlay-cont">
                      <div id="progressBar" class="easyui-progressbar" style="width:100%;height:30px"></div>
                      <div class="progressOverlay-title">正在加载...</div>
                      <div class="progressOverlay-map-bg"></div>
                  </div>
              </div>`;
    // before方法 在被选中元素之前加入
    $("#mapIframe").before(loadingHtml);
    // 动态添加easyui组件 需要刷新
    $.parser.parse($("#progressOverlay"));
    let progressValue = $("#progressBar").progressbar("getValue");
    progressTimer = setInterval(()=>{
      if(progressValue < 90){
        progressValue += Math.floor(Math.random() * 10);
        progressValue = progressValue >= 100? 99:progressValue
        $("#progressBar").progressbar("setValue",progressValue)
      }else{
        clearInterval(progressTimer)
      }
    },200)
  }
}复制