Question

我已经完成了这项研究，所以我很欣赏javascript中没有sleep（）方法。我无法弄清楚对我来说什么是正确的选择，因为setTimeout（）由于其异步性质而无法解决我的情况。

我的程序解析来自用户的输入并在eval（）语句中执行它。执行代码将调用我预先编写并可供用户使用的函数。这些功能包括绘图（颜色），它将在屏幕上的用户定义的位置放置彩色方块。它不一定与问题相关，但如果您想知道我只是制作<div>并插入具有适当高度的半透明<img>。

现在我想要睡眠功能：如果用户绘制了很多正方形，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);
}

Answer 1

由于您控制了用户正在调用的功能，因此您可以修改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);
  });
}

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

1 个答案: