定时器在每次重置时都会变得越来越快

Question

定时器在每次重置时都会变得越来越快。我想我需要使用clearTimeout，但我不确定如何实施它。下面的代码：

$(function(){ 
    sessionmin = 25; 
    $("#sessionMinutes").html(sessionmin); 
    $("#circle").click(function() { 
    timeInSeconds = sessionmin * 60; 
    timeout(); 
    }); 
}) 

function timeout(){ 
    setTimeout(function() { 
    if (timeInSeconds > 0) { 
     timeInSeconds -= 1; 
     hours = Math.floor(timeInSeconds/3600); 
     minutes = Math.floor((timeInSeconds - hours*3600)/60); 
     seconds = Math.floor(timeInSeconds - hours*3600 - minutes*60); 
     $("#timer").html(hours + ":" + minutes + ":" + seconds); 
    } 
    timeout(); 
    }, 1000); 
} 

Answer 1

你必须定义你setTimeout作为变量进行复位。

See Fiddle

每次点击一次

var thisTimer;  // Variable declaration. 
$(function(){ 
     sessionmin = 25; 
     $("#sessionMinutes").html(sessionmin); 
     $("#circle").click(function(){ 
      clearTimeout(thisTimer);  // Clear previous timeout 
      timeInSeconds = sessionmin * 60; 
      timeout(); 
     }); 
}) 

function timeout(){ 
    thisTimer = setTimeout(function() { // define a timeout into a variable 
     if(timeInSeconds>0){ 
     timeInSeconds-=1; 
     hours = Math.floor(timeInSeconds/3600); 
     minutes = Math.floor((timeInSeconds - hours)/60); 
     seconds = (timeInSeconds - hours*3600 - minutes*60) 
     $("#timer").html(hours + ":" + minutes + ":" + seconds); 
     } 
    timeout(); 
    }, 1000); 
} 

Answer 2

你应该：使用setInterval代替setTimeout，返回的时间间隔的ID setInterval产生，清除间隔重新启动它。这里有一个例子：https://jsfiddle.net/8n2b7x0s/

$(function(){ 
     var sessionmin = 25; 
     var intervalId = null; 
     $("#sessionMinutes").html(sessionmin); 
     $("#circle").click(function() { 
      timeInSeconds = sessionmin * 60; 
      // clear the current interval so your code isn't running multiple times 
      clearInterval(intervalId); 
      // restart the timer 
      intervalId = run(); 
     }); 
}) 

function run(){ 
    return setInterval(function() { 
     if(timeInSeconds>0){ 
      timeInSeconds-=1; 
      hours = Math.floor(timeInSeconds/3600); 
      minutes = Math.floor((timeInSeconds - hours)/60); 
      seconds = (timeInSeconds - hours*3600 - minutes*60) 
      $("#timer").html(hours + ":" + minutes + ":" + seconds); 
     } 
    }, 1000); 
}