Waiting for repaint in Javascript

Question

I am trying to run some code after I change the background of an element. I'd like to run the code after the background is changed visually, not just internally. Thus I'd like to wait for a repaint. I tried doing this using rAF, but that does not seem to be the correct way, because the code gets executed before the background color is changed visually (talking about milliseconds though).

I tried to achieve my goal with the following code (without luck):

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

What would be the correct way of waiting for the repaint?

Answer 1

requestAnimationFrame will run its callback just before the next repaint. Put the code you want to run in a setTimeout inside that, since the timeout callback will run almost immediately after the repaint finishes.

You can also use document.body instead of document.getElementsByTagName("body")[0]:

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

Live demo, using alert (which blocks) instead of socket.emit:

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

Another example code that takes a screenshot using html2canvas. Open up example.com, open your console, and run the following:

const script = document.body.appendChild(document.createElement('script'));
script.src = 'https://html2canvas.hertzen.com/dist/html2canvas.js'
script.onload = () => {
  requestAnimationFrame(() => {
    document.body.style.backgroundColor = "rgb(0, 75, 75)";
    requestAnimationFrame(() => {
      setTimeout(() => {
        html2canvas(document.querySelector("body")).then(canvas => {
          document.write('<img src="'+canvas.toDataURL("image/png")+'"/>');
        });
      });
    });
  });
};