循环的进度条

progress bar in for loop

本文关键字：循环      更新时间：2023-09-26

我需要javascript 中for循环中的进度条

for(index=0; index < 1000; index++){
    // set progress bar value to  index/1000 * 100 + '%'
}

我注意到我们可以把它放在setInterval函数中，但运行for循环会花费更多时间。

那么，有没有什么方法可以在不花费更多时间的情况下运行for循环并生成进度条呢？

那么，有没有什么方法可以在不花费更多时间的情况下运行for循环并生成进度条呢？

大多数情况下没有（请参阅下文了解"大多数"的原因），您必须向浏览器让步（例如，通过setTimeout或setInterval），这样它才能更新页面显示，这确实会增加循环运行的时间。现在，通常情况下，如果您使用0的超时，浏览器会在5到10毫秒内回电。所以称之为10ms。在1000个循环中，您可能每100个循环产生一次（例如，10次进度更新），这只会使总时间增加100毫秒左右。

FWIW，看起来是这样的（假设它是一个你正在循环的数组）：

function loop(array, batchSize, callback) {
    var index = 0;
    doWork();
    function doWork() {
        var limit = Math.min(array.length, index + batchSize);
        while (index < limit) {
            // Do something with array[index]
        }
        if (limit < max) {
            setTimeout(doWork, 0);
        }
        else {
            callback(); // Done
        }
    }
}

用途：

loop(someArray, 100, function() {
    // Done
});

为什么"大部分"不：在一些浏览器上（尤其不是IE9或更早版本），对于某些任务，你可以使用网络工作者。web工作线程是一个独立的JavaScript线程，独立于在后台运行的主JavaScript线程。这两个线程通过互相发布消息进行通信。

所以你可以启动一个网络工作者，把工作交给它，让它给你发消息来更新你的进度条。如果你想走这条路的话，这篇文章提供了网络工作者的基本知识。

就其价值而言，它看起来像这样：

主要文件和脚本：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Progress</title>
<style type="text/css">
body, html {
  height: 100%;
}
body {
    font-family: sans-serif;
}
</style>
</head>
<body>
<div id="progress"><em>(Click to start)</em></div>
<script>
(function() {
  var div = document.getElementById("progress");
  var counter = new Worker("counter.js");
  div.addEventListener("click", run);
  counter.addEventListener("message", function(event) {
    div.innerHTML = "Counter so far: " + event.data.counter;
  });
  function run() {
    div.removeEventListener("click", run);
    counter.postMessage({ max: 10000000 });
  }
})();
</script>
</body>
</html>

counter.js web工作程序脚本（它们总是单独的文件）：

self.addEventListener("message", function(event) {
  var max;
  var counter;
  max = event.data && event.data.max || 100000;
  for (counter = 0; counter < max; ++counter) {
    if (counter % 1000 === 0) {
      self.postMessage({counter: counter});
    }
  }
  self.postMessage({counter: counter});
});

您可以使用async/await和Promise+setTimeout，如下所示请记住，如果您想要接收返回值，则必须使用等待迭代（）（来自异步函数或控制台）

document.body.innerHTML="<div id='id'>test</div>"
iterate()
    async function iterate() {
        function delay(ms=0000,foo=null) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve((foo && foo()));
                }, ms); // 5 sekund
            });
        }

        for (i=0;i<1000;i++) {
            await delay(0);
            document.getElementById("id").innerText=i;
        }
        return "END"
    }

相关文章：