JavaScript | while循环和计时器的困难

时间:2016-06-11 12:56:39

标签: javascript jquery ajax timer

我正在研究番茄钟式计时器。计时器必须能够执行以下操作:

按下“开始”按钮时:

  • 启动5秒计时器。时间会改变,当然)
  • 计时器到期后,发送带有开始和结束时间戳的AJAX事件
  • 启动3秒计时器。
  • 计时器到期后,启动一个新的5秒计时器。 (循环步骤1至3共计四次)
  • 在第四个循环结束时,启动一个7秒计时器。
  • 7秒计时器到期后,再次启动5-3循环。

按下“停止”按钮时:

  • 取消计时器,将其重置为默认状态。

这是我现在的代码:

HTML

<html>
<head>
    <meta charset="UTF-8">
    <title>Pomodoro Test</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="test"></div>
<div id="timer">5</div>

<button id="start">Start</button>
<button id="reset">Reset</button>

<div id="startTime"></div>
<div id="endTime"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="functions.js"></script>
</body>
</html>

JavaScript的:

var timer = 5;
var flag = 0;
var startTime;
var endTime;
var intervalTimer;

function update() {
  if (timer-- > 0) {
    $("#timer").html(timer); // retrieve value from html
  } else {
    endTime = new Date();
    //alert("Start Time = " + startTime + "\nEnd Time = " + endTime);
    $("#endTime").html("End time: " + endTime.toTimeString());
    resetTimer();


    // TODO: send ajax call to server, sending startTime and endTime
    // so that these can be saved to database

  }
}
function loopingTimer() {
  while(flag === 0) {
    startTime = new Date();
    $("#startTime").html("Start time: " + startTime.toTimeString());
    startTimer();
    i++;
  setTimeout(function() {
    if(i < 5) {
      loopingTimer();
    }
  }, 3001)}};

$("#start").click(function() {
  loopingTimer();
});

$("#reset").click(function() {
    flag = 1;
  });



function startTimer() {
  intervalTimer = window.setInterval(update, 500);
}

function resetTimer() {
  stopTimer();
  timer = 5;
  $("#timer").text(timer);
}

function stopTimer() {
  window.clearInterval(intervalTimer);
}

我发现获得所需的功能非常困难,我已经修改了这段代码2天了。我真诚地希望你们能帮助我。

蛋糕。

1 个答案:

答案 0 :(得分:0)

while函数中的loopingTimer循环执行(简化):

while (userDidntStop) {
    startTimer();
}

中断条件是用户点击按钮。如果用户在500次循环(非常非常非常短的时间)之后这样做,那么这个循环将创建大约500个定时器。最大的问题是:避免在循环中运行定时器(或间隔相同)。

另一个问题是startTime在几乎无限循环中重置。您可以将loopingTimer与startTimer合并,因为它们基本上只做一件事,即启动计时器,从而阻止

此外,您使用timer变量来检查已用时间。根据{{​​3}},浏览器没有义务提供指定的延迟(至少setTimeout}。我认为setInterval也是如此。因此,实例化新的Date()会更安全,以便始终拥有合适的时间。

此外,可以在某处(即在数组中)存储定时器序列,以允许在任何时间修改此序列,并且还可以轻松地循环通过它。

遵循以下几点,我会写下类似下面的代码。请记住,这是一个例子,它可能无法产生您想要的行为。

var timeLoop = [5, 3, 5, 3, 5, 3, 5, 3, 7]; // seconds
var timeIterator = timeLoop.length;
var startTime;
var endTime;
var intervalTimer;

function sendTimer() { // once the timer ends, send it
    // send AJAX request with startTime and endTime here
}

function updateTimer() { // main timer loop
    var now = Date.now(); // make sure you have the right time
    var diff = endTime - now;
    if (diff <= 0) { // if endTime is past, stop and send the timer
        diff = 0;
        clearInterval(intervalTimer);
        sendTimer();
    }
    // Update the displayed time using diff (ms)
}

function resetTimer() { // to call on $("#reset").click
    if (endTime > Date.now()) {
        endTime = Date.now();
        updateTimer(); // reset the displayed time, and stop updateTimer
        // note that this will call sendTimer() with the _aborted_ time
    }
}

function startTimer() { // to call on $("#start").click
    resetTimer();
    // We will loop throught the timeLoop every time we start the timer
    if (timeLoop.length < ++timeIterator) {
        timeIterator = 0;
    }
    startTime = Date.now();
    endTime = startTime + 1000 * timeLoop[timeIterator];
    intervalTimer = setInterval(updateTimer, 500);
}