Javascript timer seconds doubling up after 1 min

Question

I have a fiddle here: 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:

<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:

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. 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);



}

}

Answer 1

You have 2 calls to animate after 1 minute. Cut the second setInterval; also, if sec<60 is redundant P.S.: I like your python way of javascript