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

Question

我一直在阅读有关 javascript 的单线程性质以及 UI 如何在代码完成之前不会更新的信息(例如 this question )。对该问题的回答主要解释了代码是如何执行的，但没有提供一些“hacky”计时器之外的真正可行的解决方案。

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

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

警告:我的示例包含一个十亿次迭代的 for 循环(在我的机器上耗时 < 2 秒)并且可能会卡住您的计算机。

如有任何帮助，我们将不胜感激。

Answer 1

一些变化

• 在“逻辑”周围添加了一个setTimeout，以便DOM 有机会重绘
• 拆分 then(makeCalculations()) 行，因为 #1 updateClass() 不返回 promise ，而 #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>