В ожидании перекраски в Javascript

Question

Я пытаюсь запустить некоторый код после изменения фона элемента. Я хотел бы запустить код после изменения фона визуально , а не только внутри. Поэтому я хотел бы дождаться перекраски. Я попытался сделать это, используя rAF, но это не совсем правильный путь, потому что код выполняется до визуального изменения цвета фона (хотя речь идет о миллисекундах).

Я пытался достичь своей цели с помощью следующего кода (без везения):

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

Каков будет правильный способ ожидания перекраски?

Answer 1

requestAnimationFrame запустит свой обратный вызов непосредственно перед следующим перерисовыванием. Поместите в него код, который вы хотите запустить, в setTimeout, поскольку обратный вызов тайм-аута будет выполняться почти сразу после завершения перерисовки.

Вы также можете использовать document.body вместо document.getElementsByTagName("body")[0]:

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

Демонстрация в реальном времени, используя alert (какие блоки) вместо socket.emit:

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

Еще один пример кода, который делает снимок экрана с использованием html2canvas. Откройте example.com , откройте консоль и выполните следующее:

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")+'"/>');
        });
      });
    });
  });
};