Question

我尝试使用javascript动态更新素数而不使用服务器端编码。这是我的代码。

<!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>
<title>AJAX with PHP: Quickstart</title>
<script type="text/javascript">
var n = 1;
search: while (true) {
  n += 1;
  for (var i = 2; i <= Math.sqrt(n); i += 1)
    if (n % i == 0)
     continue search;
  // found a prime!
    document.getElementById('result').innerHTML=n;
}
</script>
</head>
<body>
    <p> I want to update prime number here</p>

<div id="result" >

</div>   
</body>
</html>

但是，div“result”不会在这里更新。我们不能只用javascript做这个吗？在以下示例http://www.whatwg.org/demos/workers/primes/page.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>
<title>AJAX with PHP: Quickstart</title>
<script type="text/javascript">
var n = 1;
function testNextPrime() {
    var isPrime = true;
    n = n + 1;
   // console.log('testing', n);
    for (var i = 2; i <= Math.sqrt(n); i += 1) {
        if (n % i == 0) isPrime = false;
    }

    if (isPrime) {
       document.getElementById('result').innerHTML=n;
      }

    // Schedule the next test (this gives browser a chance to update display and process any other events)
    setTimeout(testNextPrime, 2000);
}
// Start testing for primes
testNextPrime();
</script>
</head>
<body>
    <p> I want to update prime number here</p>

<div id="result" >

</div>   
</body>
</html>

Answer 1

问题是你有一个无限循环。你永远不会退出while (true) ...循环？在此之前，浏览器永远不会有机会更新DOM并刷新显示。

这是一个JSFiddle showing one way to use setTimeout()放弃对主事件循环的控制。

更新：您可以使用Web工作者，但这需要将工作程序代码分解为可以从单独的URL加载的脚本。 Doing this in a JSFiddle是可能的，但需要一些扭曲，使解决方案比其他必要的更复杂。所以在阅读该代码时请注意这一点。

Answer 2

尝试替换此行：

// found a prime!
    document.write(n);

请记住，您的循环是无限的，浏览器很可能会在某些时候崩溃。

通过javascript更新素数不起作用

2 个答案: