javascript 如何在JS循环中更新HTML UI

在这里，我试图根据循环的进度更新进度条，但是直到嵌套循环结束时进度条才会更新，这并不理想。

function upload_img() {
    // Actual progress bar
    progress_bar = document.querySelector("#progress-bar");
    document.querySelector("#bar-area").style.display = "flex";

    //**Omitted

    setTimeout(function() {
        //**Omitted

        let size = obj_data.length * obj_data[0].length;

        for (let row = 0; row < obj_data.length; row++) {
            for (let col = 0; col < obj_data[0].length; col++) {
                // Incrementing counter
                j++;

                if (j % 1000 === 0 || j === size) {
                    //Should be updating progress bar every 1000 out of 13400, but is not doing so until end^^^^
                    progress_bar.style.width = `${Math.round(j / size * 100)}%`;
                    console.log(`${j} of ${size} so percent is ${j / size * 100}`)
                }

                   
            }

        }

    }, 1)

}

我尝试使用间隔/超时，但它们没有帮助。

我经常发现使用 async/await 比使用 setTimeout/setInterval 等更容易。然后你所要做的就是在每次循环迭代之间休眠/等待/暂停几毫秒（这给了浏览器时间重新呈现屏幕，因为如果你不暂停脚本，它就不会这样做）。
如果JavaScript有一个sleep函数...实际上，你可以用一行代码写一个sleep函数：接收一个毫秒数，创建一个promise，它将在该毫秒数后解析，并在此函数中使用一次 setTimeout 来实现这一点。
由于使用await是在等待promise解析，因此您可以在循环内执行await sleep（ms）（只要它在async函数内-允许await的函数）。
下面的进度条实现就是基于这个想法，并允许您在循环中更新进度条，如您所愿。
当然，你可以在循环中做其他的事情（或者调用一个做其他事情的函数）--比如上传东西，获取东西等等。但是在这个例子中，我关注的是进度条，你可以在一个循环中更新它。

async function progressBarExample() {
  const sleep = ms => new Promise(res => setTimeout(res, ms));
  const pBarEl = document.querySelector('.progress-bar div');
  const pBarTextEl = document.querySelector('.progress-bar span');
  const loopMax = 1000;
  for (let i = 0; i < loopMax; i++) {
    let percent = (i / loopMax) * 100;
    pBarEl.style.width = percent + '%';
    pBarTextEl.innerText = Math.round(percent) + '%';
    await sleep(20);
  }
}

progressBarExample();

.progress-bar {
  border-radius: 5px;
  width: calc(100% - 40px);
  margin: 20px;
  background-color: #999;
  height: 30px;
  position: relative;
}

.progress-bar div {
  border-radius: 5px;
  background-color: #1f1f85;
  height: 30px;
  width: 0%;
}

.progress-bar span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  margin-top: 5px;
  font-family: Verdana;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Progressbar</title>
</head>

<body>
  <div class="progress-bar">
    <div></div>
    <span></span>
  </div>
</body>

</html>

javascript 如何在JS循环中更新HTML UI

1条答案

相关问题

热门标签

最新问答