Timer wird immer schneller bei jedem Reset

Question

Der Timer wird immer schneller, wenn ich es zurücksetze. Ich denke, ich muss clearTimeout verwenden, bin aber unsicher, wie es zu implementieren ist. Hier ist der Code:

$(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

Sie haben Ihre setTimeout als Variable zu definieren, um es zurückzusetzen.

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

Sie sollten: setInterval anstelle von setTimeout, senden Sie das Intervall-ID, die setInterval erzeugt, das Intervall löschen, bevor Sie es neu starten. Hier ein Beispiel: 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); 
}