javascript - 为什么浏览器中的绘制会被推迟？

Question

我有一个没有背景颜色的 div，然后我想更改背景颜色两次。这是我的代码:

function runForSeconds(second) {
    var start = +new Date();
    while (start + second * 1000 > (+new Date())) {}
}

var el = document.getElementById("foo");

el.style.backgroundColor = "blue";

// do some "long running" task
runForSeconds(10);

el.style.backgroundColor = "red";

在两次背景颜色变化之间，我运行了很长时间的javascript

但是当我运行页面时，我看不到背景变成蓝色，页面无法响应10秒后，背景直接变成红色。

为什么会发生这种情况？我该如何解决这个问题？

Answer 1

JavaScript(通常)在与渲染相同的线程中运行。因此，当 JavaScript 繁忙时，不会发生渲染。

因此，在您的情况下，当您的代码运行时，当您通过 runForSeconds() 函数阻止 JavaScript 时，不会发生渲染。

延迟执行某些代码的更简洁的方法是使用 setTimeout() ，这将不会阻塞线程，从而保持渲染(以及整个浏览器)响应用户输入。

var el = document.getElementById("foo");

el.style.backgroundColor = "blue";

setTimeout( function(){
  el.style.backgroundColor = "red";
}, second * 1000 );