在Javascript中等待重新绘制

我试图在更改元素的背景后运行一些代码。我希望在更改背景后以视觉方式运行代码，而不仅仅是在内部。因此，我想等待重新油漆。我试着使用rAF来实现这一点，但这似乎不是正确的方法，因为代码在背景颜色发生视觉变化之前就已经执行了（不过是毫秒）

我试图通过以下代码实现我的目标（运气不佳）：

---

等待重新绘制的正确方法是什么？

requestAnimationFrame将在下一次重新绘制之前运行其回调。将要在其中运行的代码放入

setTimeout

，因为重新绘制完成后，超时回调几乎会立即运行

您也可以使用

document.body

而不是

document.getElementsByTagName（“body”）[0]

：

requestAnimationFrame(() => {
  document.body.style.backgroundColor = "rgb(0, 75, 75)";
  requestAnimationFrame(() => {
    setTimeout(() => {
      socket.emit("notify-black");
    });
  });
});

现场演示，使用

警报

（阻止）而不是

套接字。发射

：

requestAnimationFrame（（）=>{
document.body.style.backgroundColor=“rgb（0,75,75）”；
requestAnimationFrame（（）=>{
设置超时（（）=>{
警报（“通知黑色”）；
});
});
});

requestAnimationFrame

将在下一次重新绘制之前运行其回调。将要在其中运行的代码放入

setTimeout

，因为重新绘制完成后，超时回调几乎会立即运行

您也可以使用

document.body

而不是

document.getElementsByTagName（“body”）[0]

：

requestAnimationFrame(() => {
  document.body.style.backgroundColor = "rgb(0, 75, 75)";
  requestAnimationFrame(() => {
    setTimeout(() => {
      socket.emit("notify-black");
    });
  });
});

现场演示，使用

警报

（阻止）而不是

套接字。发射

：

requestAnimationFrame（（）=>{
document.body.style.backgroundColor=“rgb（0,75,75）”；
requestAnimationFrame（（）=>{
设置超时（（）=>{
警报（“通知黑色”）；
});
});
});不幸的是，这不起作用。emit转到服务器并将其转发到另一个客户端，该客户端在检索时运行一个函数。由于某种原因，发送和接收此发射比实际本地更改背景颜色要快。现在，我只是将超时设置为500毫秒，但我想删除猜测因素。这应该不会有问题-请参阅使用
警报
进行阻止的代码段。在超时回调运行时，背景应该总是重新绘制的（
requestAnimationFrame
总是在重新绘制之前运行，之后必然会运行
setTimeout
回调），但是，emit的接收端决不会自行随机启动其方法。它只在收到我调试过的emit后运行它的方法。但我不确定为什么。我仔细检查了一下，发射只到达一次，因此没有其他客户尝试沟通。你从什么得出结论，发射关闭时颜色在视觉上没有改变？你有正在运行的颜色检测代码吗？（虽然DOM应该在重新绘制之前就提供JS设置的颜色）事实上，我已经运行了颜色检测。当接收到发射信号时，将拍摄一张照片。从这一点我知道背景还没有在视觉上更新。不幸的是，这不起作用。emit转到服务器并将其转发到另一个客户端，该客户端在检索时运行一个函数。由于某种原因，发送和接收此发射比实际本地更改背景颜色要快。现在，我只是将超时设置为500毫秒，但我想删除猜测因素。这应该不会有问题-请参阅使用
警报
进行阻止的代码段。在超时回调运行时，背景应该总是重新绘制的（
requestAnimationFrame
总是在重新绘制之前运行，之后必然会运行
setTimeout
回调），但是，emit的接收端决不会自行随机启动其方法。它只在收到我调试过的emit后运行它的方法。但我不确定为什么。我仔细检查了一下，发射只到达一次，因此没有其他客户尝试沟通。你从什么得出结论，发射关闭时颜色在视觉上没有改变？你有正在运行的颜色检测代码吗？（虽然DOM应该在重新绘制之前就提供JS设置的颜色）事实上，我已经运行了颜色检测。当接收到发射信号时，将拍摄一张照片。从这一点我知道，背景还没有更新视觉。