Question

我是JavaScript和编程领域的新手，我正在努力进行基本的JavaScript练习，我应该仅使用基本功能创建一个基于用户提示值的时间表，它应该在以下情况下中断循环：用户插入值-1。虽然，直到我用-1中断循环后，循环才会显示时间表，但循环似乎太快了。

这是我的代码：

var userInput;

function checkValidity(question) {

  if(isNaN(question) || (question === "" )) {
    console.log('Inserire un numero valido');
    return false;
  } else {
    console.log('defined');
    return true;
  }
}

function timeTable(valueUser) {
  document.write("Times Table for number: " + valueUser + "<br />");
  
  for(var i = 0; i < 10; i++) {					
    document.write(valueUser + " * " + i + " = " + valueUser * i + "<br />");
  }

}

function showQuestion() {
  userInput = parseInt(prompt("Enter your Times Table value:"));
  
  var answerValidate = checkValidity(userInput);

  if(answerValidate) {
    if(userInput !== -1) {
      timeTable(userInput);
      showQuestion();
    } else {
      console.log("Grazie per aver partecipato!");
    }
  } else {
    showQuestion();
  }

  
}

showQuestion();

有人可以在我做错事情时建议我吗？

谢谢大家！

Answer 1

document.write不会立即执行其工作，只是将其放在队列中，并且“浏览器”将在没有其他事情要做时执行该工作。通过在这些showQuestion调用之后立即调用document.write，可以保持“浏览器”的使用。因此，一旦递归停止（当用户输入-1时），它将执行那些累积的作业。

要解决此问题，只需使用showQuestion将下一个对setTimeout的呼叫放在队列上，也不要延迟（或延迟为0）：

setTimeout(showQuestion);

示例：

var userInput;

function checkValidity(question) {

  if(isNaN(question) || (question === "" )) {
    console.log('Inserire un numero valido');
    return false;
  } else {
    console.log('defined');
    return true;
  }
}

function timeTable(valueUser) {
  document.write("Times Table for number: " + valueUser + "<br />");
  
  for(var i = 0; i < 10; i++) {					
    document.write(valueUser + " * " + i + " = " + valueUser * i + "<br />");
  }

}

function showQuestion() {
  userInput = parseInt(prompt("Enter your Times Table value:"));
  
  var answerValidate = checkValidity(userInput);

  if(answerValidate) {
    if(userInput !== -1) {
      timeTable(userInput);
      setTimeout(showQuestion);
    } else {
      console.log("Grazie per aver partecipato!");
    }
  } else {
    showQuestion();
  }
}

showQuestion();

话虽如此，我建议您完全不要使用document.write，而应使用console.log之类的替代方法或更改特定元素的textContent。另外，请使用<input>元素，而不要使用侵入性的prompt调用。这里不需要循环，用户可以根据需要输入任意数量的值。

示例：

function timesTable(valueUser) {
  var result = "Times Table for number: " + valueUser + "\n";          // accumulate the result in a string (use "\n" instead of "<br>")
  
  for(var i = 0; i < 10; i++) {					
    result += valueUser + " * " + i + " = " + valueUser * i + "\n";
  }
   
  return result;                                                       // and return it
}

function showQuestion() {
  var value = parseInt(document.getElementById("my-input").value);     // get the value from the input
  
  if(isNaN(value)) {                                                   // if it is not valid
    alert("Invalid input! Try again!");                                // alert the user and urge him to start over
  } else {                                                             // otherwise
    document.getElementById("my-result").textContent = timesTable(value); // create the times table of this number and show them in the my-result element 
  }
}

document.getElementById("my-button").onclick = function() {            // when the button is clicked
    showQuestion();                                                    // call showQuestion
};

<input id="my-input"><button id="my-button">Show times table</button>
<pre id="my-result"></pre>

Answer 2

我认为这段代码可以很好地工作。您所缺少的是prompt()正在阻止，并且只有在此函数返回之前，JavaScript才能运行。

为避免这种情况，请不要使用prompt()，而要使用简单的<input type="text" />。显然，这将使您脱离正在使用的同步范例，并需要以异步方式重组代码。确实，这很容易做到。这应该可以帮助您：

<input id="campo_di_testo" type="text" /><input id="bottone_invia" type="button" value="invia" />

<script>

  document.getElementById("bottone_invia").onclick = () => {
    var textNode;

    textNode = document.getElementById("campo_di_testo");
    console.log("hai premuto invia e il testo immesso è: " + textNode.value);
  };

</script>

此外，避免使用易卜拉欣指出的document.write()。它将覆盖DOM树并删除<input>元素。

您可以像这样使用<textarea>：

<textarea id="area"></textarea>

// in JS:
var area = document.getElementById("area");
area.value += "nuova riga da appendere" + "\n";
                                          ^^^^ don't forget to append the newline

或类似的任何<div>：

<div id="output"></div>

// in JS:
var output = document.getElementById("output");
output.innerText += "nuova riga da appendere" + "<br />";

主循环函数不运行嵌套函数

2 个答案: