如何在执行另一个代码期间临时更改 div css？

Question

我在临时修改 div CSS 以创建加载屏幕时遇到问题，同时某些东西正在计算或修改阴影下的区域 div。

预期结果：

点击按钮。
Div 被阴影遮盖（用于加载动画）。
代码正在做一些耗时的事情。
2完成后，阴影被移除。

当前结果

点击按钮。
代码正在做一些耗时的事情。
Div 被阴影遮盖（使用评论的第 3 部分进行测试）。
然后立即删除，不可见。

尝试过：

这段代码有和没有承诺。

截取的代码：

$('#butt').on('click', function() {
     console.log('test1');
     document.getElementById('info').innerHTML = '';
     new Promise((resolve, reject) => {
     //PART 1 ------------------------------------------------------
          let height = document.getElementById('el1').getBoundingClientRect().height
                  + document.getElementById('el2').getBoundingClientRect().height
                  + document.getElementById('el3').getBoundingClientRect().height;
          document.getElementById('info').innerHTML += height+'<br>';
          document.getElementById('shadow').style.height = ''+height+'px';
          document.getElementById('info').innerHTML += document.getElementById('shadow').style.height+'<br>';
          document.getElementById('shadow').style.top = ''+(-height)+'px';
          document.getElementById('shadow').classList.add("w3-show");
          document.getElementById('butt').classList.add("w3-disabled");
          resolve();
     }).then(() => {
     //PART 2 ------------------------------------------------------
          //Do anything that not finish instantly.
          let a = 0;
          let i = 10000;
          while(i!=0) {
            i--;
            document.getElementById('info').innerHTML += a;
            a = a + Math.log(a);
          };
          console.log('test2');
     }).then(() => {
     //PART 3 ------------------------------------------------------
          console.log('test3');
          document.getElementById('shadow').classList.remove("w3-show");
          document.getElementById('butt').classList.remove("w3-disabled");
     });
});

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <body>
    <button id='butt'>Show modal</button>
    <br>
    <p id='info'></p>
    <br>
    <div>
      <div id='el1' style="background-color: blue; heigh:10px; width:100px;">s</div>
      <div id='el2' style="background-color: green; heigh:10px; width:100px;">s</div>
      <div id='el3' style="background-color: red; heigh:10px; width:100px;">s</div>
      <div id='shadow' class='w3-hide' style="position: relative; background-color: black; heigh:5px; z-index: 2; opacity: 0.5; width:100px;">s</div>
      <br><br><br><br><br><br><br>
    </div>
  </body>
</html>

Answer 1

您的第 2 部分没有 return 任何承诺，因此 .then() 对第 3 块没有任何影响。您可以 return一个新的承诺：

$('#butt').on('click', function() {
     console.log('test1');
     document.getElementById('info').innerHTML = '';
     new Promise((resolve, reject) => {
     //PART 1 ------------------------------------------------------
          let height = document.getElementById('el1').getBoundingClientRect().height
                  + document.getElementById('el2').getBoundingClientRect().height
                  + document.getElementById('el3').getBoundingClientRect().height;
          document.getElementById('info').innerHTML += height+'<br>';
          document.getElementById('shadow').style.height = ''+height+'px';
          document.getElementById('info').innerHTML += document.getElementById('shadow').style.height+'<br>';
          document.getElementById('shadow').style.top = ''+(-height)+'px';
          document.getElementById('shadow').classList.add("w3-show");
          document.getElementById('butt').classList.add("w3-disabled");
          resolve();
     }).then(() => {
     //PART 2 ------------------------------------------------------
          //Do anything that not finish instantly.
         return new Promise((resolve,reject)=>{
          let a = 0;
          let i = 10000;
          while(i!=0) {
            i--;
            document.getElementById('info').innerHTML += a;
            a = a + Math.log(a);
          };
          console.log('test2');
          resolve()
          })

     }).then(() => {
     //PART 3 ------------------------------------------------------
          console.log('test3');
          document.getElementById('shadow').classList.remove("w3-show");
          document.getElementById('butt').classList.remove("w3-disabled");
     });
});

Answer 2

这实际上是一个棘手的问题。您使用如下同步代码的第一种方法不会在计算之前应用 css，因为 DOM 操作是 synchronous，但是，浏览器的页面 re-rendering 响应DOM 更新是 asynchronous。这就是为什么您看不到 CSS 的任何更新，因为所有 DOM 操作都是在所有 synchronous 执行后立即应用的。

下面 synchronous 中的示例：

$("#butt").on("click", function () {
    //PART 1 ------------------------------------------------------
    let height =
        document.getElementById("el1").getBoundingClientRect().height +
        document.getElementById("el2").getBoundingClientRect().height +
        document.getElementById("el3").getBoundingClientRect().height;
    document.getElementById("info").innerHTML += height + "<br>";
    document.getElementById("shadow").style.height = "" + height + "px";
    document.getElementById("info").innerHTML +=
        document.getElementById("shadow").style.height + "<br>";
    document.getElementById("shadow").style.top = "" + -height + "px";
    document.getElementById("shadow").classList.add("w3-show");
    document.getElementById("butt").classList.add("w3-disabled");
    console.log("test1");
    //PART 2 ------------------------------------------------------
    //Do anything that not finish instantly.
    let a = 0;
    let i = 10000;
    while (i != 0) {
        i--;
        a = Number(document.getElementById("info").innerHTML);
        a = a + Math.log(a);
        document.getElementById("info").innerHTML = a;
    }
    console.log("test2");
    //PART 3 ------------------------------------------------------
    console.log("test3");
    document.getElementById("shadow").classList.remove("w3-show");
    document.getElementById("butt").classList.remove("w3-disabled");
});

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <body>
    <button id='butt'>Show modal</button>
    <br>
    <p id='info'></p>
    <br>
    <div>
      <div id='el1' style="background-color: blue; heigh:10px; width:100px;">s</div>
      <div id='el2' style="background-color: green; heigh:10px; width:100px;">s</div>
      <div id='el3' style="background-color: red; heigh:10px; width:100px;">s</div>
      <div id='shadow' class='w3-hide' style="position: relative; background-color: black; heigh:5px; z-index: 2; opacity: 0.5; width:100px;">s</div>
      <br><br><br><br><br><br><br>
    </div>
  </body>
</html>

你可以做的是使用 async/await 方法等待所有 DOM 操作完成。

示例如下：

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

$("#butt").on("click", async function () {
    //PART 1 ------------------------------------------------------
    let height =
        document.getElementById("el1").getBoundingClientRect().height +
        document.getElementById("el2").getBoundingClientRect().height +
        document.getElementById("el3").getBoundingClientRect().height;
    document.getElementById("info").innerHTML += height + "<br>";
    document.getElementById("shadow").style.height = "" + height + "px";
    document.getElementById("info").innerHTML +=
        document.getElementById("shadow").style.height + "<br>";
    document.getElementById("shadow").style.top = "" + -height + "px";
    document.getElementById("shadow").classList.add("w3-show");
    document.getElementById("butt").classList.add("w3-disabled");
    console.log("test1");
    //PART 2 ------------------------------------------------------
    //Do anything that not finish instantly.

    await delay(100);

    let a = 0;
    let i = 10000;
    while (i != 0) {
        i--;
        a = Number(document.getElementById("info").innerHTML);
        a = a + Math.log(a);
        document.getElementById("info").innerHTML = a;
    }
    console.log("test2");
    //PART 3 ------------------------------------------------------
    console.log("test3");
    document.getElementById("shadow").classList.remove("w3-show");
    document.getElementById("butt").classList.remove("w3-disabled");
});

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <body>
    <button id='butt'>Show modal</button>
    <br>
    <p id='info'></p>
    <br>
    <div>
      <div id='el1' style="background-color: blue; heigh:10px; width:100px;">s</div>
      <div id='el2' style="background-color: green; heigh:10px; width:100px;">s</div>
      <div id='el3' style="background-color: red; heigh:10px; width:100px;">s</div>
      <div id='shadow' class='w3-hide' style="position: relative; background-color: black; heigh:5px; z-index: 2; opacity: 0.5; width:100px;">s</div>
      <br><br><br><br><br><br><br>
    </div>
  </body>
</html>

如何在执行另一个代码期间临时更改 div css？

How to temporary change div css for duration of executing another code?

javascript

promise