Question

我正在生成素数，它会一直滞后直到完成。有没有办法我可以做到，所以它不会落后。例如，如果您要生成1000，那么我希望它在计算完数字后立即吐出答案。

HTML：

<!DOCTYPE html>
<html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <title>Prime Generator</title>
  <h1>
  Welcome to my online prime generator!
  <h1>
  <style>
    .w3-gold,.w3-hover-gold:hover{color:#fff!important;background-color:#c9a000!important}
    .w3-btn {
    background-color: #c9a000;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 0px;
    -webkit-transition-duration: 0.4s; 
    transition-duration: 0.4s;
    cursor: pointer;
    float: right;
    }
    }
    .button1 {
    background-color: black;
    color: white;
    }
    .button1:hover {
    background-color: #e7e7e7;
    color: black
    }
    .button2 {
    background-color: #c9a000;
    color: white;
    }
    .button2:hover {
    background-color: #e7e7e7;
    color: black
    }
  </style>
  </head>
  <body>
    <div class="w3-container">
      <div class="w3-card-4">
        <div class="container w3-gold">
          <h2>Input Form</h2>
        </div>
        <form class="w3-container">
          <p>
            <select class="w3-select" name="option" id="option">
              <option value="" disabled selected>Generate or Choose?</option>
              <option value="1" >Generate</option>
              <option value="2" >Choose</option>
            </select>
            <input class="w3-input" id="inputt" type="text">
            <label class="w3-text">Type in a number<label>
          </p>
          <p>     
          <div class="w3-btn button2" id="BT2">Clear</div>
          <div class="w3-btn button1" id="BT1">Proceed</div>
          <div id ="done"></div>
          <div id="out"></div>
          <div id="gout"></div>
        </form>
        <script>
          function prime(num) {
            var stop = num % 2 == 0
            var num1 = 2
            var num2 = 2
            while (stop == false && num2 <= Math.sqrt(num)) {
                stop = num1 * num2 == num
                num1++
                if (num1 == num) {
                        num1 = 2
                        num2++
                }
            }
            if (stop == true) {
                return(num + " is not prime.")
          } else {
            return(num + " is prime")
          }         
          }
          document.getElementById("BT1").addEventListener("click", function(){
          if (isNaN(document.getElementById("inputt").value) == false && document.getElementById("inputt").value != "" && document.getElementById("option").value == 1) {
          document.getElementById("out").innerHTML = "<br> Generating up to " + document.getElementById("inputt").value + "!"
          document.getElementById("gout").innerHTML = ""
          for (num3 = 1; num3 <= parseInt(document.getElementById("inputt").value); num3++) {
            document.getElementById("gout").innerHTML = document.getElementById("gout").innerHTML + "<br>" + prime(num3)
          }
            document.getElementById("done").innerHTML = "done!"
          } else if (isNaN(document.getElementById("inputt").value) == false && document.getElementById("inputt").value != "" && document.getElementById("option").value == 2) {
            document.getElementById("out").innerHTML = "Checking if " + document.getElementById("inputt").value + " is prime!"
            document.getElementById("gout").innerHTML = "<br>" + prime(parseInt(document.getElementById("inputt").value))
          } else if (document.getElementById("inputt").value != "") {
          document.getElementById("out").innerHTML = document.getElementById("inputt").value + " is not a number!"
          } else {
          document.getElementById("out").innerHTML = "Thats a blank space!"
          }
          });
          document.getElementById("BT2").addEventListener("click", function(){
          document.getElementById("gout").innerHTML = ""
          document.getElementById("out").innerHTML = ""
          document.getElementById("done").innerHTML = ""
          });
        </script>
      </div>
    </div>
  </body>
</html>

Answer 1

要立即解决，您可以将for循环的内容替换为以下内容：

var pr = prime(num3);
var cont = document.createTextNode(pr);
var br = document.createElement('br');
document.getElementById("gout").appendChild(br);
document.getElementById("gout").appendChild(cont);

我认为滞后的原因是设置innerHTML花费了很多时间。

通过for循环时如何停止滞后？

1 个答案: