我有一个循环，需要在浏览器中运行2亿次。这是一个模拟器，几个人需要定期使用。运行大约需要15分钟，但在此期间，浏览器会经常弹出“此脚本耗时太长”等警告，并在功能期间完全挂起Firefox。这也意味着页面不会更新我的状态指示器（这只是一个数字）。
我用google搜索“javascript yield”并阅读前4页的点击量。一些人讨论了一个新的“yield”关键字，但只有一个描述和例子，我觉得这是不可理解的，例如： “包含yield关键字的函数是一个生成器。当你调用它时，它的形式参数被绑定到实际的参数，但它的实体并没有被实际评估”。 yield会屈服于用户界面吗？
我找到的为数不多的解决方案之一就是这个旧帖子，它使用不赞成的被调用者参数和一个定时器来调用自身： http://www.julienlecomte.net/blog/2007/10/28/
但是，上面的示例不包含任何循环变量或状态，当我添加它们时它会崩溃，我的净结果总是为零。
它也没有进行分块，但我发现了一些其他的例子，每次迭代都使用“index％100 == 0”。但是，这似乎是一种缓慢的做法。例如。这样：
How to stop intense Javascript loop from freezing the browser
但它没有任何方法来更新进度，也没有屈服于UI（所以仍然挂起浏览器）。这是一个在执行期间挂起浏览器的测试版本：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var spins = 1000000
var chunkSize = 1000;
var chunk;
function Stats() {this.a=0};
var stats = new Stats();
var big;
var index = 0;
var process = function() {
for (; index < spins; index++) {
stats.a++;
big = (big/3.6)+ big * 1.3 * big / 2.1;
console.write(big);
// Perform xml processing
if (index + 1 < spins && index % 100 == 0) {
document.getElementById("result").innerHTML = stats.a;
setTimeout(process, 5);
}
}
document.getElementById("result").innerHTML = stats.a;
};
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload="process()">
<div id=result>result goes here.</div>
</body>
</html>
这是stats.a始终为零的另一种尝试（所以我认为存在一些范围问题）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var spins = 1000000
var chunkSize = 1000;
var chunk;
function Stats() {this.a=0};
var stats = new Stats();
function doIt() {
function spin() {
for (spinIx=0; (spinIx<chunkSize) && (spinIx+chunk < spins); spinIx++) {
stats.a++;
}
}
for (chunk =0; chunk < spins; chunk+=chunkSize){
setTimeout(spin, 5);
document.getElementById("result").innerHTML = stats.a;
}
document.getElementById("result").innerHTML = stats.a;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload="doIt()">
<div id=result>result goes here.</div>
</body>
</html>
我花了48个小时试图让这个工作 - 要么我非常愚蠢，要么这很难。有什么想法吗？
有几个人建议网络工作者。我试了好几天才能完成他的工作，但我找不到一个类似的例子，它传递了一个数字等。下面的代码是我最后一次尝试让它工作，但结果总是0，它应该是100000.I.e。它的失败方式与我上面的第二个例子失败的方式相同。
spinMaster.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script>
if(typeof(Worker)==="undefined") {
document.write("<h1>sorry, your browser doesnt support web workers, please use firefox, opera, chorme or safari</h1>");
}
var worker =new Worker("spinWorker.js");
worker.postMessage({times:1000000});
worker.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
</script>
<div id="result">result goes here</div>
</body>
</html>
spinWorker.js
function State() {
this.a=0;
}
var state = new State();
self.addEventListener('message', spin, false);
function spin(e) {
var times, i;
times = e.data.times;
//times = 1000000; // this doesnt work either.
for(i;i<times;i++) {
state.a++;
}
self.postMessage(state.a);
}
结果输出：0
答案 0 :(得分：4)
网络工作者听起来就像是更好的解决方案。
我写得很快，所以我不知道它是否有效。表现会非常糟糕......
编辑：更改为与海报相同的格式。测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var spins = 1000000
var chunkSize = 1000;
var chunk;
function Stats() {this.a=0};
var stats = new Stats();
var big = 0.0;
var index = 0;
function workLoop() {
index += 1;
stats.a++;
big = (big/3.6)+ big * 1.3 * big / 2.1;
console.log(big);
// Perform xml processing
document.getElementById('result').innerHTML = stats.a;
if (index < spins) {
setTimeout(workLoop, 5);
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload="workLoop()">
<div id="result">result goes here.</div>
</body>
</html>
答案 1 :(得分：1)
因为JS通常是单线程的，所以我认为没有办法解决它。但是，如果您只支持较新的浏览器，您可能需要查看可以生成新线程的Web工作者：http://developer.mozilla.org/en-US/docs/DOM/Using_web_workers
我唯一能想到的缺点就是我读过很难调试Web Workers，因为开发工具（Chrome开发工具除非运行dev channel，firebug）不支持对其进行分析。
这是一个很好的教程，可以帮助您入门：http://net.tutsplus.com/tutorials/javascript-ajax/getting-started-with-web-workers/
答案 2 :(得分：1)
您在第一次测试中已接近一个工作示例，但我确实看到了逻辑错误。在你的if（）中，你需要从函数返回，否则它将始终运行多个竞争该线程的函数。
var process = function() {
for (; index < spins; index++) {
stats.a++;
big = (big/3.6)+ big * 1.3 * big / 2.1;
console.write(big);
// Perform xml processing
if (index + 1 < spins && index % 100 == 0) {
document.getElementById("result").innerHTML = stats.a;
setTimeout(process, 5);
//!!!!!
return;//without this it'll keep iterating through the for loop without waiting for the next 5ms
//!!!!!
}
}
document.getElementById("result").innerHTML = stats.a;
};
两个样本都没有等待下一个setTimeout（在第二个示例中，您继续迭代for循环，直到for循环完成，但是在每个块大小中，您为后续迭代设置了超时。所有这些确实是将整个序列延迟5 ms，它们仍然堆积并从你的for循环开始迭代时执行5 ms）
总而言之，你似乎走在正确的轨道上，两个例子都只有很小的逻辑错误。
答案 3 :(得分：0)
github上有一个库可用于这种类型的大循环，而无需锁定浏览器/线程，也无需使用Web工作者。
有点实验性，并且支持大的递归循环，但它可能对你有用。取决于q.js解决承诺。
答案 4 :(得分：-1)
这应该做你想要的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var spins = 1000000
var chunkSize = 1000;
var stats = {a:0,spins:0};
function doIt() {
for (var chunk = 0; chunk < chunkSize; chunk++) {
stats.a++;
}
document.getElementById("result").innerHTML = stats.a;
if(++stats.spins < spins) setTimeout(doIt,5);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload="doIt()">
<div id=result>result goes here.</div>
</body>
</html>