带有超时功能的 JavaScript

Question

我正在尝试在

元素，以#showText 作为 ID。但是，无论如何，#showText 元素永远不会出现。我对下面的代码有解释。谁能帮我显示#showText 元素？

var counter = 0;

// Call the update function 2 seconds after first load.  
timeoutID = window.setTimeout("Update();", 2000);

function Update() {
  counter++;
  var textField = document.getElementById("showText");
  /* The value counter changes once every 2 seconds.  */
  textField.innerHtml = "The counter is now at " + counter;

  // Set another timeout for the next count, function calls itself.  
  timeoutID = window.setTimeout("Update();", 2000);
}

// Set event listeners for the buttons.  
document.getElementById("restart").addEventListener("click", function() {
  counter = 0; // Reset counter to 0.  
  Update(); // Call Update() method to start counting from 0.  
});

// Clears time out for timeID, which means Update() will no longer be invoked, and counter stops increasing.  
document.getElementById("stop").addEventListener("click", function() {
  window.clearTimeout(timeoutID);
});

<h1>Timeout Example</h1>
<p>The counter will update every two seconds. </p>
<p>Press RESTART or STOP to restart or stop the count. </p>
<p id="showText"></p>
<section>
  <button type="button" id="restart">RESTART</button>
  <button type="button" id="stop">STOP</button>
</section>

Answer 1

1. 将setTimeout("Update();", 2000) 更改为setTimeout(Update, 2000)
2. 将innerHtml 更改为innerHTML

var counter = 0;

// Call the update function 2 seconds after first load.  
timeoutID = window.setTimeout(Update, 2000);

function Update() {
  counter++;
  var textField = document.getElementById("showText");
  /* The value counter changes once every 2 seconds.  */
  textField.innerHTML = "The counter is now at " + counter;

  // Set another timeout for the next count, function calls itself.  
  timeoutID = window.setTimeout(Update, 2000);
}

// Set event listeners for the buttons.  
document.getElementById("restart").addEventListener("click", function() {
  counter = 0; // Reset counter to 0.  
  Update(); // Call Update() method to start counting from 0.  
});

// Clears time out for timeID, which means Update() will no longer be invoked, and counter stops increasing.  
document.getElementById("stop").addEventListener("click", function() {
  window.clearTimeout(timeoutID);
});

<h1>Timeout Example</h1>
<p>The counter will update every two seconds. </p>
<p>Press RESTART or STOP to restart or stop the count. </p>
<p id="showText"></p>
<section>
  <button type="button" id="restart">RESTART</button>
  <button type="button" id="stop">STOP</button>
</section>

Answer 2

您的 textField.innerHTML 有语法错误；你写了innerHtml。我还删除了孤立函数调用，因为您希望它只在我假设的按钮按下时运行。更正一下，现在它可以工作了 - 停止按钮也是 - ：

    var counter = 0;

    function Update() {
      counter++;
      var textField = document.getElementById("showText");
      /* The value counter changes once every 2 seconds.  */
      textField.innerHTML = "The counter is now at " + counter;

      // Set another timeout for the next count, function calls itself.  
      timeoutID = window.setTimeout("Update();", 2000);
    }

    // Set event listeners for the buttons.  
    document.getElementById("restart").addEventListener("click", function() {
      counter = 0; // Reset counter to 0.  
      Update(); // Call Update() method to start counting from 0.  
    });

    // Clears time out for timeID, which means Update() will no longer be invoked, and counter stops increasing.  
    document.getElementById("stop").addEventListener("click", function() {
      window.clearTimeout(timeoutID);
    });

    <h1>Timeout Example</h1>
    <p>The counter will update every two seconds. </p>
    <p>Press RESTART or STOP to restart or stop the count. </p>
    <p id="showText"></p>
    <section>
      <button type="button" id="restart">RESTART</button>
      <button type="button" id="stop">STOP</button>
    </section>

Answer 3

你可以：

• 使用setInterval 而不是setTimeout；
• innerHTML 或 innerText 而不是（无效的）innerHtml；
• 将启动、停止、显示计数器和更新计数器的逻辑分开，以便更清楚地了解正在运行的内容和时间，并确保您没有生成额外的计时器：

var counter = 0;
var isCounting = false;
var timeoutID = null;
var textField = document.getElementById("showText");

function Stop() {
  if ( timeoutID )
  {
    self.clearInterval( timeoutID );
  }
}

function Start()
{
  Stop();
  counter = 0;
  timeoutID = self.setInterval(Update, 2000); 
  Show();
}

function Show()
{
  textField.innerText = counter;
}

function Update() {
  counter++;
  Show();
}

// Set event listeners for the buttons.  
document.getElementById("restart").addEventListener("click",  Start );
document.getElementById("stop").addEventListener("click", Stop );

<h1>Timeout Example</h1>
<p>The counter will update every two seconds. </p>
<p>Press RESTART or STOP to restart or stop the count. </p>
<p id="showText"></p>
<section>
  <button type="button" id="restart">RESTART</button>
  <button type="button" id="stop">STOP</button>
</section>

Answer 4

只需在代码中进行一次更改即可使其按预期工作。 只需替换下面的功能块并运行代码：

函数更新（）{ 计数器++； document.getElementById("showText").innerHTML = "计数器现在到了！" +计数器； timeoutID = window.setTimeout("Update();", 2000); }

这个解决方案应该适合你。