Javascript for循环中的进度条_Javascript_For Loop_Progress Bar

Javascript for循环中的进度条

javascript for-loop

Javascript for循环中的进度条,javascript,for-loop,progress-bar,Javascript,For Loop,Progress Bar,我需要在javascript中的for循环中有一个进度条 for（索引=0；索引{ 设置超时（（）=>{ 解析（（foo&&foo（））； }，ms）；/5 sekund }); } 对于（i=0；i你需要用setinterval加上这个时间。运行循环1000次是如此之快，以至于你看不到进度条的实际进度…@Bartdude如果循环花费超过半分钟的时间怎么办？那么它是有意义的。但是有几个例子，比如上传文件，实际上它会在需要的时间生成进度条。@Kimmi：你会找到的d这些通常是Flash，而不是Ja

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

for（索引=0；索引<1000；索引++）{
//将进度条值设置为index/1000*100+'%'
}

我注意到我们可以把它放在

setInterval

函数中，但是运行for循环会花费更多的时间

那么，有没有任何方法可以运行for循环并生成进度条而不需要花费更多的时间呢

大多数情况下不会（请参见下文了解“大多数”的原因），您必须返回浏览器（例如，通过

setTimeout

或

setInterval

），以便它可以更新页面显示，这确实会增加循环运行的时间。现在，如果您使用的超时时间通常为

，浏览器将在5到10毫秒之间回调您。所以称之为10毫秒。在1000周期循环中，您可能会每100个周期生成一次（例如，10次进度更新），这只会使总时间增加100毫秒左右

FWIW，看起来像这样（假设它是一个循环通过的数组）：

为什么“大部分”是否定的：对于某些任务，您可以使用。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>

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

document.body.innerHTML=“测试”
迭代（）
异步函数iterate（）{
函数延迟（ms=0000，foo=null）{
返回新承诺（（解决、拒绝）=>{
设置超时（（）=>{
解析（（foo&&foo（））；
}，ms）；/5 sekund
});
}
对于（i=0；i你需要用setinterval加上这个时间。运行循环1000次是如此之快，以至于你看不到进度条的实际进度…@Bartdude如果循环花费超过半分钟的时间怎么办？那么它是有意义的。但是有几个例子，比如上传文件，实际上它会在需要的时间生成进度条。@Kimmi：你会找到的d这些通常是Flash，而不是JavaScript。@Kimmi:FWIW，我添加了第二个示例，用一个web工作者来做这类事情。第二个示例不起作用。Chrome说：Uncaught Error:SecurityError:DOM Exception 18
@Kimmi:Yes，它起作用。复制并粘贴上面的内容，将它们放在web服务器上，然后工作很好。HTML和web工作人员的JavaScript文件必须在上（但为什么不在上？）。编辑：啊，您不是在尝试对本地文件（file://
URL）执行此操作，是吗？这样做时，很多事情都无法正常工作。请使用实际的web服务器。大多数浏览器甚至不允许来自同一文件：//URL的两个文件一起工作。
loop(someArray, 100, function() {
    // Done
});

<!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>

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