我有一个循环需要在浏览器中运行 2 亿次。这是一个需要多人定期使用的模拟器。运行大约需要 15 分钟，但在此期间，浏览器会频繁弹出“此脚本运行时间过长”等警告，并在运行期间完全挂起 Firefox。这也意味着该页面不会更新我的状态指示器（这只是一个数字）。
我搜索了“javascript yield”并阅读了前 4 页的点击量。有些人讨论了一个新的“yield”关键字，但只有一个描述和示例，我觉得难以理解，例如“包含yield关键字的函数是一个生成器。当你调用它时，它的形参绑定到实际参数，但是它的身体实际上并没有被评估”。是否yield屈服于 UI？
我确实找到的少数解决方案之一是这篇旧帖子，它使用已弃用的被调用者参数和一个计时器来调用自己： http ://www.julienlecomte.net/blog/2007/10/28/
但是，上面的示例不包含任何循环变量或状态，当我添加它们时它会崩溃，我的最终结果始终为零。
它也不进行分块，但我发现了一些其他示例，这些示例在每次迭代中都使用“index % 100 == 0”进行分块。但是，这似乎是一种缓慢的方法。例如这个：
但它没有任何更新进度的方法，也不会屈服于 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 个小时试图让这个工作——要么我很笨，要么这很难。有任何想法吗？
有几个人建议使用网络工作者。我尝试了几天让他工作，但我找不到一个类似的例子，它传递了一个数字等。下面的代码是我最后一次尝试让它工作，但是当它应该是 100000 时结果总是 0。即它失败了就像我上面的第二个例子失败一样。
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