2

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

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

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

那么有什么方法可以运行 for 循环并生成进度条而无需花费更多时间？

4

2 回答 2

8

那么有什么方法可以运行 for 循环并生成进度条而无需花费更多时间？

大多数情况下没有（请参阅下文了解为什么“大多数情况下”），您必须返回给浏览器（例如，通过setTimeout或setInterval），以便它可以更新页面显示，这确实会增加循环运行的时间。现在，通常如果您使用超时时间0，浏览器会在 5 到 10 毫秒之间回叫您。所以称之为10ms。在您的 1,000 周期循环中，您可能每 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 workers。Web Worker 是一个独立的 JavaScript 线程，与在后台运行的主 JavaScript 线程分开。两个线程通过相互发布消息进行通信。

因此，您可以启动一个网络工作者，将工作交给它，然后让它向您发布消息以更新您的进度条。如果您想走这条路，本文将介绍 Web Worker 的基础知识。

对于它的价值，它看起来像这样：

主要文件和脚本：

<!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网络工作者脚本（它们总是单独的文件）：

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});
});
于 2013-07-09T15:42:19.110 回答
0

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

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"
    }

于 2020-10-17T15:28:52.443 回答