Question

我已经尝试clearInterval()，我也尝试将变量设为var somevariable = setInterval(somefunction,sometime)，然后制作clearInterval(somevariable)。

我希望它在按下按钮（重置）时停止计时器。 stackoverflow上有很多类似的问题，但没有一个答案适合我。

var workTime = 0;
var breakTime = 0;
var breakMinutes = 0;
var breakSeconds = 0;
var sessionHour = 0;
var sessionMinutes = 0;
var sessionSeconds = 0;
var pemaBreakMinutes = 0;
var permaSessionHour = 0;
var permaSessionMinutes = 0;
var check = 0;

// Increasing Work Time
function setWorkTimePlus() {
   $("#workPlus").click(function() {
      if (workTime < 60) {
         workTime = workTime + 5;
         sessionMinutes = sessionMinutes + 5;
         $("#workTime").text(workTime);
         $("#sessionMinutes").text(workTime);
      }
      if (workTime === 60) {
         sessionHour = sessionHour + 1;
         workTime = 0;
         sessionMinutes = 0;
         $("#sessionHours").text(sessionHour);
         $("#workTime").text(workTime);
         $("#sessionMinutes").text(sessionMinutes);
      };
   });
};
// Decrease Work Time
function setWorkTimeMinus() {
   $("#workMinus").click(function() {
      if (workTime > 0) {
         workTime = workTime - 5;
         sessionMinutes = sessionMinutes - 5;
         $("#workTime").text(workTime);
         $("#sessionMinutes").text(workTime);
      };
      if (workTime === 0 && sessionHour > 0) {
         sessionHour = sessionHour - 1;
         workTime = 60;
         sessionMinutes = 60;
         $("#sessionHours").text(sessionHour);
         $("#workTime").text(workTime);
         $("#sessionMinutes").text(sessionMinutes);
      };
   });
};
// Increase Break Time
function setBreakTimePlus() {
   $("#breakPlus").click(function() {
      if (breakTime < 60) {
         breakTime = breakTime + 5;
         breakMinutes = breakMinutes + 5;
         $("#breakTime").text(breakTime);
      };
   });
};
// Decrease Break Time
function setBreakTimeMinus() {
   $("#breakMinus").click(function() {
      if (breakTime > 0) {
         breakTime = breakTime - 5;
         breakMinutes = breakMinutes - 5;
         $("#breakTime").text(breakTime);
      };
   });
};
// Process of decreasing seconds, Minutes and Hours and then initiating Break Timer
function working() {
   if (sessionSeconds > 0) {
      sessionSeconds = sessionSeconds - 1;
      $("#sessionSeconds").text(sessionSeconds);
   }
   if (sessionSeconds === 0 && sessionMinutes > 0) {
      sessionMinutes = sessionMinutes - 1;
      sessionSeconds = 60;
      $("#sessionMinutes").text(sessionMinutes);
   }
   if (sessionMinutes === 0 && sessionHour > 0) {
      sessionHour = sessionHour - 1;
      sessionMinutes = 60;
      $("#sessionHours").text(sessionHour);
      $("#sessionMinutes").text(sessionMinutes);
   }
   if (breakSeconds > 0 && sessionSeconds === 0 && sessionMinutes === 0 && sessionHour === 0) {
      $("#sessionH").text("Break Time");
      breakSeconds = breakSeconds - 1;
      $("#sessionSeconds").text(breakSeconds);
      $("#sessionMinutes").text(breakMinutes);
   }
   if (breakSeconds === 0 && breakMinutes > 0 && sessionSeconds === 0) {
      breakMinutes = breakMinutes - 1;
      breakSeconds = 60;
      $("#sessionMinutes").text(breakMinutes);
   }
   if (breakSeconds > 0 && sessionSeconds === 0 && sessionMinutes === 0 && sessionHour === 0 && breakMinutes === 0) {
      sessionMinutes = permaSessionMinutes;
      sessionSeconds = 0;
      sessionHours = permaSessionHour;
      breakMinutes = pemaBreakMinutes;
      breakSeconds = 0;
      $("#sessionHours").text(sessionHour);
      $("#sessionMinutes").text(sessionMinutes);
      $("#sessionH").text("Session Time");
   }
};
// Invoking the above function every one second to decrease seconds timely
function startWorkingAndStop() {
   $("#sessionTime").click(function() {
      if (check <= 0) {
         check++;
      permaSessionMinutes = sessionMinutes;
      permaSessionHour = sessionHour;
      pemaBreakMinutes = breakMinutes;
      $("#setWorkTime,#setBreakTime").slideUp(1000);
      $("#sessionTime").css('border', '0px');
      setInterval(working, 1000);
      };
   });
};

function nukeIt() {
   $("#reset").click(function() {
      if (check > 0) {
         $("#setWorkTime,#setBreakTime").slideDown(1000);
         $("#sessionTime").css({
            "border-top": "2px solid black",
            "border-bottom": "2px solid black"
         });
         check = 0;
         workTime = 0;
         breakTime = 0;
         breakMinutes = 0;
         breakSeconds = 0;
         sessionHour = 0;
         sessionMinutes = 0;
         sessionSeconds = 0;
         pemaBreakMinutes = 0;
         permaSessionHour = 0;
         permaSessionMinutes = 0;
         $("#workTime").text(workTime);
         $("#breakTime").text(breakTime);
         $("#sessionMinutes").text(sessionMinutes);
         $("#sessionSeconds").text(sessionSeconds);
         $("#sessionHours").text(sessionHour);
      }
   });
};

$(document).ready(function() {
   setWorkTimePlus();
   setWorkTimeMinus();
   setBreakTimePlus();
   setBreakTimeMinus();
   startWorkingAndStop();
   nukeIt();
});

您也可以在CodePen上查看。在设置休息和工作时间后，您可以通过单击计时器来启动计时器。

如果您愿意，可以忽略下面的问题，我会在上面的问题上选择答案

如果你访问了，你能不能帮我制作文字＆＃34;小时分秒秒＃34;响应00:00:00，我无法弄清楚，我已经尝试过flexbox而且只是常规的CSS。

Answer 1

clearInterval() 是停止间隔的正确方法。您的问题可能是范围。如果你在一个jQuery异步调用中定义你的变量，但你没有在父类中保留它的引用，你将无法再次引用它。

以下是使用上述原则的示例：

var interval;
var on;

$(function(){

    $("button").click(function(){

        if(on == "1")
        {
            clearInterval(interval);
            on = "0";
        }
        else
        {
            interval = setInterval(function(){

                $("div").html((parseInt($("div").html()) + 1));

            });

            on = "1";
        }
    });

});

JSFiddle

Answer 2

setInterval返回您创建的特定间隔事件的唯一标识符。使用带有该唯一标识符的clearInterval作为参数应取消该事件。

Answer 3

编辑：不使用此功能。请改用@ David的答案。它好多了。

<击> 你可以使用

setTimeout(...)

而不是

setInterval(...)

像这样使用：

var loop = function() { /* The code you want to do */ if (/* Condition */) { setTimeout(loop, /* Time in MS. */) } }; loop();

~~它不是很好，但它确实有效。~~

Answer 4

看看我帮你的代码笔，分钟格式化为00，你可以尝试几个小时。

$("#sessionMinutes").text('0'+workTime);

Code Pen

如何使setInterval停止？

4 个答案: