Question

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

for(index=0; index < 1000; index++){

// set progress bar value to  index/1000 * 100 + '%'

}

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

那么有没有办法运行for循环并生成进度条而不需要花费更多时间？

Answer 1

那么有没有办法运行for循环并生成进度条而不需要花费更多时间？

大部分时间没有（请参阅下面的“大多数”为什么），你必须回到浏览器（例如，通过setTimeout或setInterval），这样它就可以更新页面显示，这将是确实增加了循环运行的时间。现在，通常如果您使用0的超时，浏览器将在5到10毫秒之间回拨您。所以称它为10ms。在你的1,000个循环循环中，你可能每100个循环产生一次（例如，10个进度更新），这只会在总时间上增加100ms左右。

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
});

为什么“大多数”不是：在some browsers（不是，特别是IE9或更早版本），对于某些任务，您可以使用web workers。 Web worker是一个独立的JavaScript线程，与主JavaScript线程分开，后者在后台运行。这两个线程通过相互发送消息进行通信。

因此，您可以启动一名网络工作人员，将工作交给他，然后让您发布消息以更新您的进度条。 This article给出了网络工作者的基础知识，如果你想走那条路。

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

主要文件和脚本：

<!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});
});

Answer 2

您可以使用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"
    }

for循环中的进度条

2 个答案: