javascript - JS 挂在 do while 循环上

Question

我想知道如何用 JS 解决挂页问题。

我有一个 JS 循环，我正在像这样测试它，但它似乎永远挂起 - 有没有办法在完成脚本的同时停止它挂起？：

<div id="my_data"></div>

<script>
function test(value){
output= [];
do{ 
    value++;
    output.push(value);
    document.getElementById('my_data').innerHTML = (output.join(''));
}while(value < 10000000);
alert('end'); // never occurs
}

test(0);
</script>

score 7 · Accepted Answer

您正在使用越来越长的字符串更新 DOM 一千万次。

如果你是某种来自未来的超级存在，那么也许这是有道理的。

score 5 · Accepted Answer

Javascript 是单线程的，因此在运行循环时不会发生其他任何事情。它运行了一千万次，每次运行时都会将 #my_data 的 innerHTML 设置为新的东西。这是非常低效的，似乎没用。你想达到什么目的？

score 4 · Accepted Answer

您将10,000,000连续的数字连接成一个字符串，这在任何现代超级计算机上都无法正常工作。

如果您想轮询进度，请设置一个计时器以使其速度稍慢一些。这不实用，但看起来不错：http: //jsfiddle.net/V6jjT/2/

HTML：

<div id="my_data"></div>

脚本：

var value = 0;
var interval = setInterval(function() {
    if (value > 100) {
        clearInterval(interval);
        return;
    }

    value++;
    document.getElementById('my_data').innerHTML += ' ' + value;
}, 10);

score 3 · Accepted Answer

像这样运行一个紧密的循环在完成之前不会更新任何东西；另外，10M数组项？！

如果您真的想这样做并且不让浏览器一直挂起，那么您必须使用它setInterval来允许浏览器在两者之间刷新。

function updater(value, max, interval) {
  var output = [],
  node = document.getElementById('my_data'),
  tid = setInterval(function() {
    if (value++ < max) {
      output.push(value);
      node.innerHTML = (output.join(''));
    } else {
      alert('done');
      clearInterval(tid);
    }
  }, interval);
}

updater(0, 10, 200);

score 1 · Accepted Answer

您不应该在每次迭代时更新 HTML。

function test(value){
    output= [];
    do { 
        value++;
        output.push(value);
    } while(value < 10000000);
    document.getElementById('my_data').innerHTML = (output.join(''));
    alert('end'); // never occurs
}

应该可以工作（尽管 HTML 中的 1000 万个数字仍然需要时间来呈现）。

如果您想查看正在运行的数字，您应该看一下window.setInterval- 浏览器在 js 执行之间需要一些时间来刷新其视图。因此，您将不得不重写异步运行多个数据块的代码。也可以看看：

score 0 · Accepted Answer

紧密的循环很可能总是耗尽计算能力。我会分块做。比如说，将您的列表分成更小的列表，并在列表之间暂停 5 毫秒。如果你需要，我可以提供一个例子。

javascript - JS 挂在 do while 循环上

6 回答 6

Related

Reference