在Javascript(jQuery)完成之前更新CSS

Question

我一直在阅读关于javascript的单线程性质以及在代码完成之前UI将如何更新(例如,这个问题).对该问题的回答主要解释了代码如何执行,但在一些"hacky"定时器之外没有提供真正可行的解决方案.

我想知道是否有一个很好的解决方案,可能包括.then()在javascript执行之前"绘制"UI的承诺或功能.

以下是一个具体的例子:http://jsfiddle.net/zbtsd12k/.在这个例子中,我希望在运行计算之前立即改变"Change Color".

警告:我的示例包括10亿次迭代的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>