计时器在每次重置时都变得越来越快答案

【问题标题】：Timer keeps getting faster on every reset计时器在每次重置时都变得越来越快
【发布时间】：2016-07-30 02:26:49
【问题描述】：

每次我重置计时器时，它都会变得越来越快。我想我需要使用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);
}

【问题讨论】：

每次点击，都会添加一个新的自调用超时

标签： javascript jquery timer settimeout cleartimeout

【解决方案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);
}

【讨论】：

【解决方案2】：

您应该：使用setInterval 而不是setTimeout，返回setInterval 生成的间隔ID，在重新启动之前清除该间隔。这是一个例子：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);
}

【讨论】：