リセットは毎回速くなります

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が発生するインターバルIDを返し、setTimeoutの代わりに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); 
}