[英]JavaScript | Difficulties with while-loop and timer
我正在研究番茄式的计时器。 计时器必须能够执行以下操作:
当按下“开始”按钮时:
当按下“停止”按钮时:
这是我现在拥有的代码:
的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天的时间修改这段代码。 我衷心希望你们能帮助我。
蛋糕。
在loopingTimer
函数中, while
循环执行(简化):
while (userDidntStop) {
startTimer();
}
中断条件是用户单击按钮。 如果用户在500次循环后(非常短的时间)这样做,则该循环将创建约500个计时器。 最大的问题在这里:避免在循环中运行计时器(或间隔相同)。
另一个问题是startTime在几乎无限的循环中重置。 您可以将loopingTimer与startTimer合并,因为它们基本上只做一件事情,即启动计时器,因此可以防止
另外,您可以使用timer
变量来检查经过的时间。 浏览器没有义务提供指定的延迟(根据MDN文档 ,至少对于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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.