Как я могу изменить фон на веб-странице дважды с помощью js

Question

функция должна изменить фон на красный и синий с 1 секундой между двумя операциями, но когда я ее запускаю, я обнаруживаю, что первое изменение не появляется на странице

я помещаю "сон""функционирую так, как я думал 2 изменения происходят одновременно

   function changeBackGround()
   {
   document.body.style.backgroundColor = "red"; 
   sleep(1000); 
   document.body.style.backgroundColor = "blue";

   }


 function sleep(milliseconds) {
   var start = new Date().getTime();
   for (var i = 0; i < 1e7; i++)
   {
    if ((new Date().getTime() - start) > milliseconds) 
     {
     break;
     }
   }
  } 

Я ожидаю, что фон страницы сначала должен быть красным, а через 1 секунду он станет синим

Answer 1

вы можете определить функцию для принятия цвета в качестве аргумента, например:

function changeBackGround(color) {
   document.body.style.backgroundColor = color; 
}

и вы можете использовать setTimeout для выполнения функции после заданного периода в миллисекундах

window.onload = function() {
  changeBackGround('red');
  setTimeout(function() {
    changeBackGround('blue');
  }, 1000);
}

Answer 2

Ваша доморощенная функция sleep блокирует цикл событий в цикле занятости. Это не позволяет браузеру перекрашивать страницу, поэтому, пока DOM обновлен, фон не отображается на отображаемой странице.

Используйте setTimeout, если вы хотите запустить немного кода через некоторое время.