Question

该功能应在1秒钟内将背景更改为红色和蓝色两次操作之间，但是当我运行它时，我发现第一个更改没有出现在页面上

我把“睡眠”功能设为我认为这两个更改是同时发生的

   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

您的自制sleep函数将事件循环锁定为繁忙循环。这样可以防止浏览器重新绘制页面，因此在DOM更新后，背景不会反映在呈现的页面中。

如果要在一段时间后运行一些代码，请使用setTimeout。

Answer 2

您可以定义如下函数以接受颜色作为参数：

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

，您可以使用setTimeout在给定时间（以毫秒为单位）后执行功能

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

如何使用js

2 个答案: