代码之家 › 专栏 › 技术社区 › elPastor

在javascript(jquery)完成之前更新css

css jquery javascript

elPastor · 技术社区 · 7 年前

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

我想知道是否有一个好的解决方案,可能包括承诺,或者 .then() 在JavaScript执行之前“绘制”用户界面的功能。

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

警告 :我的示例包括一个10亿次迭代的for循环(在我的机器上花费了<2秒),可能会冻结您的计算机一点。

任何帮助都将不胜感激。

1 回复 | 直到 7 年前

Taplar 7 年前

几点变化

增加了一个 setTimeout 围绕“逻辑”,以便DOM有机会重新绘制
打破了 then(makeCalculations()) 因为第1行 updateClass() 不返回承诺和2 then(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>