Question

＆＃13;

/*front design: dribbble https://cdn.dribbble.com/users/85456/screenshots/3996869/artboard_3_1x.png*/
var audio = new Audio('http://soundbible.com/grab.php?id=1377&type=mp3');
var pomodoro = 25,
  currentTime = Date.parse(new Date()),
  deadline, timeInterval, breakTime = 5,
  i;

function beep() {
  audio.play();
}

var count = $('.sl').find('h2').text();

var count1 = $('.bl').find('h2').text();
//console.log(count1);
function plus() {
  count++;
  $('.sl2').text(count);
  $('.timer').text(count + ":00");
  pomodoro = $('.sl').find('h2').text();

}

function minus() {
  if (count > 1) {
    count--;
    $('.sl2').text(count);
    $('.timer').text(count + ":00");
    pomodoro = $('.sl').find('h2').text();
    //console.log(pomodoro);
  }
}

function plus1() {
  count1++;
  $('.bl2').text(count1);
  breakTime++;

}

function minus1() {
  if (count1 > 1) {
    count1--;
    //beep();
    breakTime--;
    $('.bl2').text(count1);
    //console.log(breakTime);

  }
}


function getTimeLeft(end) {
  var total = Date.parse(end) - Date.parse(new Date());
  var seconds = Math.floor((total / 1000) % 60);
  var minutes = Math.floor((total / 1000 / 60) % 60);

  return {
    "total": total,
    "minutes": minutes,
    "seconds": seconds
  };
}

function startClock() {
  timeInterval = setInterval(function() {
    var t = getTimeLeft(deadline);

    $(".timer").html(("0" + t.minutes).slice(-2) + ":" + ("0" + t.seconds).slice(-2));

    if (t.total <= 0) {
      beep(); //If timer reaches zero, stop the timer.
      clearInterval(timeInterval);
      if (i === 0) {
        startBreak();
      } else if (i === 1) {
        startPomodoro();
      }
    }
  }, 1000);
}

function startPomodoro() {
  deadline = new Date(Date.parse(new Date()) + (pomodoro * 60 * 1000));
  //alert(deadline);
  startClock();
  i = 1;
}

function startBreak() {
  deadline = new Date(Date.parse(new Date()) + (breakTime * 60 * 1000)); //Set deadline
  startClock();
  i = 0;
}

$('.btn_start').click(function() {
  $(".change").attr("disabled", "disabled");
  startPomodoro();

});
$('.btn_break').click(function() {
  $(".change").attr("disabled", "disabled");
  $('.session').text('BREAK');
  startBreak();
});
$('.cplus').click(function() {
  //console.log('b12');
  plus1();
});
$('.cminus').click(function() {
  //console.log('b12');
  minus1();
});
$('.bplus').click(function() {
  //console.log('b12');
  plus();
});
$('.bminus').click(function() {
  //console.log('b12');
  minus();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <div class="content">
    <h1>Just a</h1>
    <h1>Pomodoro</h1>
    <h3><a href="https://codepen.io/chintuyadav" target="_blank">Coded by Chintu Yadav Sara</a> </h3>
    <h3>Freecodecamp.org</h3>
  </div>
  <div class="clock">
    <div class="screen">
      <h3 class="session">SESSION</h3>
      <h1 class="timer">25:00</h1>
      <button class="btn btn_start">Start</button> <button class="btn btn_break">Take Break</button>
    </div>
    <div class="buttons">
      <div class="bl">
        <input class="change cplus" id="bl2+" type="button" value="+"><input class="change cminus" id="bl2-" type="button" value="-">
        <h2 class="bl2">5</h2>
        <p class="bl1">Break length</p>
      </div>
      <div class="sl">
        <input class="change bplus" id="sl2+" type="button" value="+"><input class="change bminus" id="sl2-" type="button" value="-">
        <h2 class="sl2">25</h2>
        <p class="sl1">Session length</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

我遇到了代码问题。当我尝试运行代码时。它运行正常，但在执行后它再次启动。即使我尝试 clearInterval（）。当我单击startPomodor（）时它正常启动，并在完成后再次启动。那么，我怎么能停止执行代码。这是代码。

Answer 1

为什么要添加＆＃34; if（i === 0）{＆＃34;在clearInterval之后？它将再次启动计数器。 clearInterval只是停止执行代码，但它将通过现有代码。

从你的JS代码中删除它：

if (i === 0) {
        startBreak();
      } else if (i === 1) {
        startPomodoro();
      }

你有什么理由吗？您不需要执行setInterval，它会每隔1000毫秒执行一次，直到您清除它为止。

您可以在此处详细了解：

w3school - setinterval

w3school - clearinterval

如何在jQuery中停止setInterval？

1 个答案: