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>

Answer 1

你用越来越长的字符串更新DOM一千万次。

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

Answer 2

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

Answer 3

您将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);

Answer 4

运行这样的紧密循环不会更新任何东西，直到它完成;另外，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);

Answer 5

您不应该每次迭代都更新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执行之间花一些时间来刷新它的视图。因此，您必须重新编写运行几个数据块的代码。另见：

Answer 6

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

JS挂起了一个do while循环

6 个答案: