如何避免“跳跃式”UI更新?

你可以改变 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");
  });
});