Javascript：我如何使用setInterval重置這個倒數計時器？

Question

我有這個倒計時器，它採用setInterval：

var startTimer = function(duration, display) { 
    var timer = duration, minutes, seconds; 

    var intervalHandler = setInterval(function() { 
     minutes = parseInt(timer/60, 10); 
     seconds = parseInt(timer % 60, 10); 

     minutes = minutes < 10 ? "0" + minutes : minutes; 
     seconds = seconds < 10 ? "0" + seconds : seconds; 

     var timer_li = document.createElement("li"); 
     timer_li.id = "timer-li"; 
     timer_li.className = "navbar-text enabled"; 
     timer_li.title = "Autorefresh is enabled"; 
     timer_li.style.cursor = "pointer"; 
     timer_li.style.marginTop = "5px"; 

     if (timer_is_enabled) { 
      console.log("Autorefreshing in: " + minutes + ":" + seconds); 
      timer_li.innerHTML = "<i class='fa fa-refresh enabled'></i>"; 
      timer_li.title = "Autorefreshing in: " + minutes + ":" + seconds; 
     } else { 
      console.log("Autorefreshing disabled"); 
      timer_li.innerHTML = "<i class='fa fa-refresh changelog-icon'></i>"; 
      timer_li.title = "Autorefreshing is disabled"; 
     } 

     if (minutes == "00" && seconds == "00" && timer_is_enabled) { 
      manageTimer(); 
     } 

     // button to enable/disable the timer 
     timer_li.addEventListener("click", function(){ 
      timer_is_enabled = !timer_is_enabled; 
     }); 

     if(document.getElementById("timer-li")) { 
      document.getElementById("timer-li").remove(); 
     } 

     var navbar = $("#user"); 
     navbar.after(timer_li); 

     if (--timer < 0) { 
      timer = duration; 
     } 
    }, 1000); 
}; 

我需要能夠在某些事件重置，例如單擊某個類型的鏈接時：

$(".main-tab").click(resetTimer); 

我知道我應該使用clearInterval，但是我最終每次都在我的代碼中混淆一下。

單擊按鈕時如何重置此計時器的任何幫助？

Answer 1

試試這個：

var intervalHandler; // global var 

var startTimer = function(duration, display) { 
    var timer = duration, minutes, seconds; 

    intervalHandler = setInterval(function() { 
    ... 
}; 

在您單擊處理程序，使用clearInterval(intervalHandler);