[英]Javascript timer seconds doubling up after 1 min
I have a fiddle here: http://jsfiddle.net/armedstar/zgM9X/ 我在这里有一个小提琴: http : //jsfiddle.net/armedstar/zgM9X/
I have a interval timer with a canvas animation and once I hit a minute, the seconds start doubling up. 我有一个带画布动画的间隔计时器,当我按下一分钟时,秒数开始翻倍。 Anyone know what could be causing this? 有人知道是什么原因造成的吗?
HTML: HTML:
<div id="loader"><canvas id="showLoader" width="250" height="250"></canvas><div id="showTimer"><p id="elapsedTime">
<script>
var clockTest = new clock(document.getElementById("showLoader"), 0, 0, 0, 0);
clockTest.animate();
</script>
</p></div></div>
JAVASCRIPT: JAVASCRIPT:
function clock(canvas, curPerc, endPercent, minsWatched, secsWatched) {
var self = this;
self.canvas = canvas;
self.curPerc = curPerc;
self.endPercent = endPercent;
self.minsWatched = minsWatched;
self.secsWatched = secsWatched;
self.context = self.canvas.getContext('2d');
self.context.lineWidth = 10;
self.context.strokeStyle = '#ed3f36';
var showPerc = document.getElementById("elapsedTime");
var x = self.canvas.width / 2;
var y = self.canvas.height / 2;
var radius = 75;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
self.animate = function (current) {
self.context.clearRect(0, 0, self.canvas.width, self.canvas.height);
self.context.beginPath();
self.context.arc(x, y, radius, -(quart), ((circ) * current + 1) - quart, false);
self.context.stroke();
self.curPerc++;
setInterval(function () {
if (self.secsWatched < 60) {
self.secsWatched++;
} else if (self.secsWatched == 60) {
self.secsWatched = 0;
self.minsWatched++;
}
var time = (self.minsWatched < 10 ? "0" + self.minsWatched : self.minsWatched) + ":" + (self.secsWatched < 10 ? "0" + self.secsWatched : self.secsWatched);
showPerc.innerHTML = time;
}, 1000);
setInterval(function () {
self.animate(self.endPercent + (self.curPerc / 100));
}, 60000);
}
} }
UPDATE! 更新! Just figured it out. 只是想通了。 I had the clock function inside the animate() so it was firing twice. 我在animate()中具有时钟功能,因此它触发了两次。 Updated the fiddle and the code below works. 更新了小提琴,下面的代码有效。
function clock(canvas, curPerc, endPercent, minsWatched, secsWatched) {
var self = this;
self.canvas = canvas;
self.curPerc = curPerc;
self.endPercent = endPercent;
self.minsWatched = minsWatched;
self.secsWatched = secsWatched;
self.context = self.canvas.getContext('2d');
self.context.lineWidth = 10;
self.context.strokeStyle = '#ed3f36';
var showPerc = document.getElementById("elapsedTime");
var x = self.canvas.width / 2;
var y = self.canvas.height / 2;
var radius = 75;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
setInterval(function () {
if (self.secsWatched < 60) {
self.secsWatched++;
} else if (self.secsWatched == 60) {
self.secsWatched = 0;
self.minsWatched++;
}
var time = (self.minsWatched < 10 ? "0" + self.minsWatched : self.minsWatched) + ":" + (self.secsWatched < 10 ? "0" + self.secsWatched : self.secsWatched);
showPerc.innerHTML = time;
}, 1000);
self.animate = function (current) {
self.context.clearRect(0, 0, self.canvas.width, self.canvas.height);
self.context.beginPath();
self.context.arc(x, y, radius, -(quart), ((circ) * current + 1) - quart, false);
self.context.stroke();
self.curPerc++;
setInterval(function () {
self.animate(self.endPercent + (self.curPerc / 100));
}, 60000);
}
} }
You have 2 calls to animate after 1 minute. 1分钟后,您有2个呼叫进行动画处理。 Cut the second setInterval; 剪切第二个setInterval; also, if sec<60 is redundant PS: I like your python way of javascript 另外,如果sec <60是多余的PS:我喜欢您的javascript python方式
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.