如果没有JavaScript Sleep（），如何延迟DOM更改？

我已经做了研究，所以我很感激javascript中没有sleep（）方法。我不知道对我来说什么是正确的选择，因为setTimeout（）的异步特性并不能解决我的问题

我的程序解析来自用户的输入，并在eval（）语句中执行它。执行代码将调用我预先编写并提供给用户的函数。这些功能包括draw（color），它将在屏幕上用户定义的位置放置一个彩色正方形。这与问题无关，但如果你想知道我只是在做一个

并插入一个半透明的

，高度合适

现在我需要sleep函数：如果用户绘制了许多方块，javascript会一次显示所有方块，但我想一个接一个地显示它们，延迟我可以控制。使用setTimeout（）无法完成此操作。尝试自行编写一个计算开始和结束时间的延迟函数只会冻结浏览器，相信我，我已经尝试过了，但它在冻结后仍然会立即绘制所有内容

我的直觉是将sleep（）调用作为draw（）方法的最后一行，因此用户在代码中创建的每个正方形都需要200毫秒来渲染，但不存在这样的函数

哦，JavaScript大师，如果JavaScript无法睡眠，我如何在网页中获得这种功能

理想情况下：

function draw() {
    var easel = document.getElementById("canvas");
    var square = document.createElement("div");
    square.setAttribute("...");
    easel.appendChild(square);

    window.sleep(200);
}

---

由于您可以控制用户正在调用的函数，因此可以修改

draw

以将方块放入队列中。然后慢慢清空队列，一次画一个矩形

一些伪JS来描述这种情况：

// Collection of things to render
var rectangles = [];

// This is the function you have users call for drawing a rectangle
function draw(color) {
  rectangles.push(new Rectangle(color));
  // do other stuff
  queueRender();
}

// Slowly draw each rectangle
function queueRender() {
  if (alreadyQueued) {
    return;
  }
  alreadyQueued = true;

  setTimeout(function drawQueue() {
    var rectangle = rectangles.shift(); // Get the first rectangle
    if (!rectangle) {
      alreadyQueued = false;
      return;
    }
    render(rectangle);
    setTimeout(drawQueue, 200);
  });
}

---

由于您可以控制用户正在调用的函数，因此可以修改

draw

以将方块放入队列中。然后慢慢清空队列，一次画一个矩形

一些伪JS来描述这种情况：

// Collection of things to render
var rectangles = [];

// This is the function you have users call for drawing a rectangle
function draw(color) {
  rectangles.push(new Rectangle(color));
  // do other stuff
  queueRender();
}

// Slowly draw each rectangle
function queueRender() {
  if (alreadyQueued) {
    return;
  }
  alreadyQueued = true;

  setTimeout(function drawQueue() {
    var rectangle = rectangles.shift(); // Get the first rectangle
    if (!rectangle) {
      alreadyQueued = false;
      return;
    }
    render(rectangle);
    setTimeout(drawQueue, 200);
  });
}

---

您是否可以使用set interval，在每个间隔后调用每个函数进行绘制，一旦调用所有函数，请删除间隔“这不能用setTimeout（）完成”——尽管这完全不真实——如果性能确实存在问题，你可能想研究一下

requestAnimationFrame

。Mike确实证明了setTimeout（）能够做我需要的事情，而且不会像其他睡眠黑客一样冻结浏览器（参见上面链接的表面上“重复”的问题，我找不到正确的解决方案）。因此，感谢大家向我展示了setTimeout（）比我最初想象的更多。您能使用set interval，在每个间隔后调用每个函数进行绘制吗？一旦调用了所有函数，请删除间隔“这不能用setTimeout（）完成”–尽管这完全是不真实的–如果性能真的是一个问题，你可能想研究一下

requestAnimationFrame

。Mike确实证明了setTimeout（）可以做我需要的事情，而且不会像其他睡眠黑客一样冻结浏览器（请参阅上面链接的表面上“重复”的问题，在这里我找不到正确的解决方案）比我原来想的要多。我想我会按照你的思路来做，我会尝试一下-提前谢谢。嵌套setTimeout的目的是什么？你有一个函数定义，作为参数“setTimeout（function drawQueue…”，然后在该函数中有另一个setTimeout，带有递归调用和200毫秒超时“设置超时（提取队列，200）；“-第一个是打字错误吗？谢谢你，迈克-这很有效，满足了我的要求。我真的认为这是不可能的，向你致敬！我想我知道你要做什么，我会尝试一下-提前谢谢。嵌套setTimeout的目的是什么？你有一个只有函数定义作为参数“setTimeout”的（函数drawQueue…）然后在该函数中使用一个递归调用和一个200毫秒超时的setTimeout“setTimeout（drawQueue，200）；”-第一个是打字错误吗？谢谢你，迈克-这很有效，满足了我的要求。我真的认为这是不可能的，向你致敬！