如何停止和重置倒數計時器？

Question

我需要顯示一個從 10 開始的倒數計時器。每當我在運行時單擊任何按鈕，計數器都會再次重置。 下面的功能運行良好，但是每當我在計數過程中單擊按鈕時，計時器計數器都會快進並且顯示得太快。

 var timeleft = 10; var downloadTimer = setInterval(function() { document.getElementById("countdown").innerHTML = timeleft + " seconds remaining"; timeleft -= 1; if (timeleft <= 0) { clearInterval(downloadTimer); } }, 1000); function fn_start() { var timeleft = 10; var downloadTimer = setInterval(function() { document.getElementById("countdown").innerHTML = timeleft + " seconds remaining"; timeleft -= 1; if (timeleft <= 0) { clearInterval(downloadTimer); } }, 1000); }

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <div id="countdown"></div> <button type='button' id='startbtn' onclick="fn_start()">Start</button>

Answer 1

每次調用函數時都需要清除間隔。

 <div id="countdown"></div> <button type='button' id='startbtn' onclick="fn_start()">Start</button> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var downloadTimer; // global var function fn_start() { var timeleft = 10; clearInterval(downloadTimer); downloadTimer = setInterval(function() { document.getElementById("countdown").innerHTML = timeleft + " seconds remaining"; timeleft -= 1; if (timeleft <= 0) { clearInterval(downloadTimer); } }, 1000); } // If you don't need to show the timer first, comment this line fn_start(); </script>