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 );

为什么浏览器中的绘画会被推迟？

1 个答案: