Question

我一直在学习javascript的单线程性质，以及在代码完成之前如何更新UI（例如this question）。对这个问题的回答主要解释了代码如何执行，但是在某些“ hacky”计时器之外没有提供真正可行的解决方案。

我想知道是否有一个好的解决方案，其中可能包括promises或.then()功能，这些功能会在执行JavaScript之前“绘制” UI。

以下是一个具体示例：http://jsfiddle.net/zbtsd12k/。在此示例中，我希望在运行计算之前，“更改颜色”会立即更改。

警告：我的示例包括一个十亿次迭代的for循环（在我的计算机上花费了<2秒的时间），并且可能会使您的计算机冻结一会。

任何帮助将不胜感激。

Answer 1

一些更改

在“逻辑”周围添加了setTimeout，以便DOM有机会重绘
将then(makeCalculations())行分开，因为＃1 updateClass()不返回承诺，而＃2 then(methodCall())将立即执行methodCall，因为您将()放在了结尾它。

function updateClass(element, newClass) {
  element.addClass(newClass);
  return true;
};

function makeCalculations() {
  $("p").text("Running...");

  setTimeout(function() {
    var x = 0;
    for (var i = 0; i < 1000000000; i++) {
      x += i;
    }

    $("p").html("Done!" + "<br />" + "x = " + x);
  }, 10);
}

$(function() {

  $("button").click(function() {

    updateClass($("span"), "purple");
    makeCalculations();

  });

});

.purple {
  color: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Change Color</span>
<br>
<button>Click Me</button>
<p>Click the button</p>

在Javascript（jQuery）完成之前更新CSS

1 个答案: