重置计数器OnClick

Question

我有一些代码用于在15秒后从15秒倒计时，它会回应“超过”时间。问题是如果有人点击两次，同一分区会有两个计数器。如果有人再次点击按钮，我需要重置计数器。

function startCountDown(i, p, f) { 
    // store parameters 
    var pause = p; 
    var fn = f; 
    // make reference to div 
    var countDownObj = document.getElementById("countDown"); 
    if (countDownObj == null) { 
     // error 
     alert("div not found, check your id"); 
     // bail 
     return; 
    } 
    countDownObj.count = function (i) { 
     // write out count 
     countDownObj.innerHTML = i; 
     if (i == 0) { 
      // execute function 
      fn(); 
      // stop 
      return; 
     } 
     setTimeout(function() { 
      // repeat 
      countDownObj.count(i - 1); 
     }, 
     pause); 
    } 
    // set it going 
    countDownObj.count(i); 
} 

function myFunction() { 
    alert("Time Over"); 
} 

HTML：

<div id="TimerTitle">Timer</div>  
<span id="countDown"></span> 
<button onclick="startCountDown(15, 1000, myFunction);"> 
    Start Time 
</button> 

Answer 1

设置超时像这样的全局变量：

timer = setTimeout(function(){countDownObj.count(i - 1);},pause); 

在函数开始清除超时

clearTimeout(timer) 

代码：

var timer; 
function startCountDown(i, p, f) { 
// store parameters 
if(timer){clearTimeout(timer)} 
var pause = p; 
var fn = f; 
// make reference to div 
var countDownObj = document.getElementById("countDown"); 
if (countDownObj == null) { 
    // error 
    alert("div not found, check your id"); 
    // bail 
    return; 
} 
countDownObj.count = function (i) { 
    // write out count 
    countDownObj.innerHTML = i; 
    if (i == 0) { 
     // execute function 
     fn(); 
     // stop 
     return; 
    } 
timer = setTimeout(function(){countDownObj.count(i - 1);},pause); 
} 
// set it going 
countDownObj.count(i); 
} 

function myFunction() { 
alert("Time Over"); 
} 

Answer 2

setTimeout返回ID到可与window.clearTimeout使用的定时器。最简单的解决办法是建立一个全球timerId

var timerId; 
... 

function startCountDown(i, p, f) { 
    ... 
    if (timerId) { window.clearTimeout(timerId); } 
    timerId = window.setTimeout(...); 

https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout