我一直在研究一个可以暂停的计时器,如果他们按下停止按钮或重置按钮,并且在倒计时达到$ minLeft = 0 $ secLeft = 0后停止。我还没有做过计时器之前,但是从我在stackoverflow上学到的东西看来,setInterval似乎是最好的选择,但我不反对做重复的setTimeout。计时器进展顺利,但我无法在任何选项中暂停。在尝试了许多不同的方向后,这是我最好的接近,但它仍然无法正常工作。有没有人看到我做错了什么。如果更容易Pomodoro Clock
,您可以在codepen上查看
function getId(){
var $buttonID = $(event.target.id).selector;
console.log($buttonID);
var initialize= 0,intervalId;
if($buttonID == "startButton")
{
if(initialize == 0)
{
var intialTime = Number($('#sesStartTime').text());
updateCountdown(intialTime, 0);
initialize = 1;
$('#startButton').attr("id", "stopButton").text("Stop");
intervalId = startTimer();
}
else
{
intervalId = startTimer();
}
}
else if($buttonID == "resetButton")
{
stopTimer(intervalId);
var prevTime = Number($('#sesStartTime').text());
updateCountdown(prevTime, 0);
}
else if($buttonID == "stopButton")
{
$('#stopButton').attr("id", "startButton").text("Start");
stopTimer(intervalId);
}
else
{
console.log("Entered else statement for gatherTimeInfo");
gatherTimeInfo($buttonID);
}
}
function startTimer(){
setInterval(checkFinish,1000);
}
function stopTimer(timer){
clearInterval(timer);
}
function checkFinish (timer){
var $minLeft = Number($('#countdownClock span:first-child').text())
var $secLeft = Number($('#countdownClock span:nth-child(2)').text());
console.log("This is minLeft: " + $minLeft + " and this is secLeft: " + $secLeft);
if($minLeft ==0 && $secLeft == 0)
{
stopTimer(timer);
console.log("I've finished the alert loop");
}
else
{
if($secLeft == 0 && $minLeft >=1)
{
console.log("Still more than a minute to go");
$minLeft--;
$secLeft = 59
updateCountdown($minLeft, $secLeft);
}
else if($secLeft > 0 && $minLeft >=1)
{
console.log("Still more than a minute to go");
$secLeft--;
updateCountdown($minLeft, $secLeft);
}
else
{
console.log("Less than a minute");
$secLeft--;
updateCountdown($minLeft, $secLeft);
}
}
}
$( "button" ).click(function() {
getId();
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="sessionBox">
<div class="row">
<div class="col-md-12">
<h4 class="text-center">Session Time</h4>
</div><!--End of col-md-12-->
</div><!--End of row-->
<div class="row">
<div class="col-md-4">
<button id="sesMinus" class="btn btn-default glyphicon glyphicon-minus"></button>
</div><!--End of col-md-4-->
<div class="col-md-4">
<p id="sesStartTime" class="text-center">5</p>
</div><!--End of col-md-4-->
<div class="col-md-4">
<button id="sesPlus" class="btn btn-default glyphicon glyphicon-plus"></button>
</div><!--End of col-md-4-->
</div><!--End of row-->
</div><!--End of sessionBox-->
<div id="timerBox">
<h3 id="currentPeriod" class="text-center">Session</h3>
<p id="countdownClock" class="text-center"><span>00</span> : <span>00</span></p>
</div><!--End of timerBox-->
<div id="interfaceBox">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="startButtonDiv">
<p class="text-center"><button id="startButton" class="btn btn-default btn-block">Start</button></p>
</div><!--End of startButton-->
</div><!--End of col-md-6-->
</div><!--End of row-->
</div><!--End of col-md-6-->
<div class="col-md-6">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="resetButtonDiv">
<p class="text-center"><button id="resetButton" class="btn btn-default btn-block">Reset</button></p>
</div><!--End of resetButton-->
</div><!--End of col-md-6-->
</div><!--End of row-->
</div><!--End of col-md-6-->
</div><!--End of row-->
</div><!--End of interfaceBox-->
答案 0 :(得分:0)
创建一个存储计时器引用的全局变量,并从startTimer方法返回该引用
var intervalId;
function startTimer(){
return setInterval(checkFinish,1000);
}
答案 1 :(得分:0)
您没有从startTimer()
函数返回值,因此,当您致电intervalId = startTimer();