如何停止和重置倒数计时器？

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>