显示IE中循环长时间运行的进度条

showing Progress bar on long running for loops in IE

本文关键字：运行 长时间 IE 循环 显示      更新时间：2023-09-26

我有一个大约有2000条记录的JSON数组，我需要构建一个表来显示这些记录中的数据。由于它有大量数据，处理可能会导致浏览器冻结。所以我被要求显示一个进度条来指示进度。Javascript是单线程的，我必须使用Setinterval来显示进度。但是，根据数组中记录的数量，IE版本中的进度没有正确显示。请帮助

var g_arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
$("#btn").click(function() {
  var Loop = 1000;
  $("#tbl tbody td").remove();
  $("#divProgress").progressbar({
    value: 0
  });
  //window.setTimeout(function(){
  for (var i = 0; i < Loop; i++) {
    var TR = $("<tr>");
    $.each(g_arr, function(index, val) {
      var TD = $("<td>");
      TD.append(val);
      TR.append(TD);
    });
    window.setTimeout(function() {
      $("#divProgress").progressbar({
        value: (i / Loop) * 100
      });
    }, 3000);
    $("#tbl tbody").append(TR);
  }
  //},0);
});
td,
th,
table {
  border-color: black;
  border-width: thin;
  border-style: solid;
  border-collapse: collapse;
}
<link href="http://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<div id="divProgress"></div>
<div id="divBody">
  <input type="button" id="btn" value="Click Here" />
  <table id="tbl">
    <thead>
      <tr>
        <th>
          Column1
        </th>
        <th>
          Column2
        </th>
        <th>
          Column3
        </th>
        <th>
          Column4
        </th>
        <th>
          Column5
        </th>
        <th>
          Column6
        </th>
        <th>
          Column7
        </th>
        <th>
          Column8
        </th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

在此处输入代码

你做错了几件事：

  • 在进行DOM操作时避免长的for循环，这是非常昂贵的。请改用requestAnimationFrame。请求动画帧基本上指示浏览器要执行动画（或某种计算），并请求浏览器调用在下一次重新绘制之前指定的函数。换句话说，它就像for循环，但每次循环迭代仅在浏览器决定（何时可以绘画）
  • 您正在创建1000个不必要的$("#divProgress")对象。使用缓存。创建单个CCD_ 4，然后使用1000次。$("#tbl tbody")被创建了1000次，也存在同样的问题
  • 您正在创建1000进度条插件实例。你现在的做法：$progressBar.progressbar({ value: (i / Loop) * 100})是构造函数，用于创建具有该值的新进度条实例。使用setter，而不是构造函数：$progressBar.progressbar("value", (i / Loop) * 100)

    var g_arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
    $("#btn").click(function() {
      var i = 0,
          Loop = 1000,
          $progressBar = $("#divProgress"),
          $body = $("#tbl tbody"),
          requestAnimationFrame =
              window.requestAnimationFrame ||
              window.mozRequestAnimationFrame ||
              window.webkitRequestAnimationFrame ||
              window.msRequestAnimationFrame,
          
          doRequestFrame = function () {
              if (i++ < Loop) {
                  $progressBar.progressbar("value", (i / Loop) * 100);
                  var $newRow = $("<tr>");
                  $.each(g_arr, function(index, val) {
                    $newRow.append($("<td>").append(val));
                  });
                  $body.append($newRow);
                  if (requestAnimationFrame) {
                      // hey browser, please call again doRequestFrame() when you are idle (before repaint)
                      requestAnimationFrame(doRequestFrame);
                  } else {
                      setTimeout(doRequestFrame, 1);
                  }
              }
          };
      $("#tbl tbody td").remove();
      
      $progressBar.progressbar({
        value: 0
      });
      
      // hey browser, please call doRequestFrame() when you are idle (before repaint)
      requestAnimationFrame ? requestAnimationFrame(doRequestFrame) : doRequestFrame();
    });
td,
th,
table {
  border-color: black;
  border-width: thin;
  border-style: solid;
  border-collapse: collapse;
}
<link href="http://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<div id="divProgress"></div>
<div id="divBody">
  <input type="button" id="btn" value="Click Here" />
  <table id="tbl">
    <thead>
      <tr>
        <th>
          Column1
        </th>
        <th>
          Column2
        </th>
        <th>
          Column3
        </th>
        <th>
          Column4
        </th>
        <th>
          Column5
        </th>
        <th>
          Column6
        </th>
        <th>
          Column7
        </th>
        <th>
          Column8
        </th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

支持旧版IE

如果没有定义requestAnimationFrame（就像IE9及以下版本一样），我将手动调用doRequestFrame。

相关文章：