帶有超時功能的 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); }

這個解決方案應該適合你。