Question

So I made a simple timer in a format like this: MM:SS.MS

You can view it here [removed]
It works fine in chrome, IE, etc. but in Firefox the seconds are like twice as long..

I took a look at some other stopwatches, but I don’t quit understand them.
Whats the best way to do it ? Right now I have a 10ms interval which generates the timer.

The function looks like that, I hope it’s understandable:

var state = false;
var msTimer = null;

var min = document.getElementById("min");
var sec = document.getElementById("sec");
var ms = document.getElementById("ms");

var minCount = 0;
var secCount = 0;
var msCount = 0;


document.onkeydown = function timer(e) {

if (!e) { e = window.event; }

if (e.keyCode == "32") {

    if (state == false) {
        state = true;

        min.innerHTML = "00";
        sec.innerHTML = "00";
        ms.innerHTML = "00";

        msTimer = window.setInterval(function() {
            if (msCount == 99) {

                msCount = 0;
                secCount++;

                // Minutes
                if (secCount == 60) {

                    secCount = 0;
                    minCount++;

                    if (minCount <= 9)
                    { min.innerHTML = "0" + minCount; }
                    else
                    { min.innerHTML = minCount; }
                }

                // Seconds
                if (secCount <= 9)
                { sec.innerHTML = "0" + secCount; }
                else
                { sec.innerHTML = secCount; }

            } else { msCount++; }

            // Miliseconds
            if (msCount <= 9)
            { ms.innerHTML = "0" + msCount; }
            else
            { ms.innerHTML = msCount; }

            // 1 Hour
            if (minCount == 60) {

                clearInterval(msTimer);

                min.innerHTML = "N0";
                sec.innerHTML = "00";
                ms.innerHTML = "0B";

                state = false;

                minCount = 0;
                secCount = 0;
                msCount = 0;
            }
        }, 10);

    } else if (state == true) {
        state = false;

        clearInterval(msTimer);

        minCount = 0;
        secCount = 0;
        msCount = 0;
    }
}

Thanks for any advices 🙂

Edit:

And btw, it’s much smoother in firefox, if I remove all styles from the timer.
But that can’t be the solution..

Answer 1

You shouldn’t be relying on the interval of the timer being exactly 10ms. It would be better if you viewed each timer tick as a request to refresh the on-screen timer, but take the measurements from the system clock or something like that.

Then however slow or busy the machine (and JS implementation) is, you’ll always see an accurate timer¹ – just one which updates less often.

---

¹ This will only be as accurate as the system clock, of course. If Javascript has access to a high-performance timer like .NET’s Stopwatch class or Java’s System.nanoTime() method, that would be better to use.