javascript - 我想更改页面背景颜色，但它在 Chrome 中无法正常工作

Question

我是一个JavaScript新手，我想改变我的页面的背景颜色，所以我写了一个页面如下:

function change_color() {
  console.log('6666');
  document.body.style.backgroundColor = "green";
  alert("the color has changed to green!");
  console.log('6666');
  document.body.style.backgroundColor = "blue";
}

<button onclick="change_color()">change color</button>

我希望函数应该先将背景颜色更改为绿色，然后显示弹出窗口，然后将背景颜色更改为蓝色。但是在Chrome中运行不一样，弹出窗口前页面没有变绿，只是变蓝，没看到变绿的过程。如果我用Edge或Firefox打开页面，它运行良好，但如果我用Chrome 67.0.3396.40或Chrome 66.0.3359.170打开页面，在弹出窗口之前页面不会变成绿色 .为什么？

Answer 1

alert 不需要触发 DOM 重新渲染，在 Chrome 中也不需要(与其他浏览器不同)。要查看中间更改，您可以使用超时在警报之前插入延迟。届时将重新呈现 DOM。

function change_color() {
    console.log('6666');
    document.body.style.backgroundColor = "green";
    setTimeout(() => {
        alert("the color has changed to green!");
        console.log('6666');
        document.body.style.backgroundColor = "blue";
    });
}

<button type="button" onclick="change_color()">change color</button>