Question

我想运行模拟并更新进度条，但是进度条以“跳跃”的方式更新。例如。它从21％增至34％增至76％。我想一步一步地从21％提高到22％，再提高到23％，等等。

将此视为SSCCE：

http://embed.plnkr.co/XIKxpV6oWyWiwklFBSLh/

HTML

<button>Simulate</button>

JS

$(document).ready(function () {
  var $button = $('button');

  var worker = new Worker("worker.js");
  worker.addEventListener("message", function(e) {
    if (e.data) {
      switch (e.data.cmd) {
        case "progress":
          $button.text((e.data.value / 250).toFixed(0) + "%");
          break;
        case "complete":
          $button.text("Simulate");
          break;
      }
    }
  });
  $button.on("click", function() {
    worker.postMessage("start");
  });
});

工人

this.addEventListener("message", function(e) {
  if (e.data === "start") {
    for (var n = 0; n < 250000000; ++n) {
      if (n % 10000 === 1) {
        this.postMessage({cmd: "progress", value: n / 10000});
      }
    }
    this.postMessage({cmd: "complete"});
  }
});

如何使它顺利更新？为什么从一开始它就不能顺利更新？

Answer 1

您可以更改progress以提供填充值。

之所以不流畅，是因为它没有发布所有值的进度值，仅发布了每个10000（如果尝试发布每个值，很可能浏览器将冻结）

if (n % 10000 === 1) {
  this.postMessage({cmd: "progress", value: n / 10000});
}

因此，您无法获得所有可能的％值，需要填写。

类似这样的东西

$(document).ready(function () {
  var $button = $('button');

  var last = 0
  var worker = new Worker("worker.js");
  worker.addEventListener("message", function process(e) {
    if (e.data) {
      switch (e.data.cmd) {
        case "progress":
          var next = (e.data.value / 250)
          var current = last

          // fill values
          // from last % to new %
          for (; current < next; ++current) {
            $button.text(current + "%")
          }

          last = current

          $button.text(next.toFixed(0) + "%");

          break;
        case "complete":
          $button.text("Simulate");
          break;
      }
    }
  });

  $button.on("click", function() {
    worker.postMessage("start");
  });
});

如何避免“跳动”的UI更新？

1 个答案: