javascript - Chrome 在 JavaScript 执行期间重绘 DOM

Question

我正在为从未编程过的人创建一门类(class)，并且希望在不使用异步编程或回调函数的情况下演示基本的 DOM 操作。

我想我可以做这样的事情:

function color(element, color) {
    element.style = "background: " + color + ";";
}

function wait(milliseconds)
{
  var e = new Date().getTime() + (milliseconds);
  while (new Date().getTime() <= e) {}
}

function disco() {
    var body = document.getElementById("body")
    color(body, "red")
    wait(500)
    color(body, "darkGreen")
    wait(500)
    color(body, "darkBlue")
}

disco()

这运行正常，但 UI 直到最后才刷新，因此背景永远不会变成红色或绿色 - 它只是最终变成蓝色。

有没有办法在函数执行过程中强制重绘？

我知道这不是一个好主意，甚至对于实际实现来说也不是可以接受的，但我的目标是让新手能够理解。

Answer 1

当您忙着等待时，浏览器无法执行任何其他操作。严重不推荐这种方法。相反，您可以像这样设置您的迪斯科舞厅。

var body = document.body;
var colors = [ "red", "darkgreen", "darkblue" ]; 
var nextColor = 0;

function color(element, color) {
    element.style = "background: " + color + ";";
}

function setNextColor() {
  color(document.body, colors[nextColor%color.length];
  nextColor = nextColor + 1;
}

function disco() {
    setInterval(setNextColor, 500);        
}

请注意，此代码仅用于演示该技术，未以任何方式进行测试。