Jquery: setTimeout Timer and Corresponding High Score List Do Not Match

Question

This seems like a very simple problem, but I can't seem to find any posts with a similar issue. I've written a basic timer in jQuery and that starts and stops with the click of two buttons, and the time at which it stops is then passed to a high score list that appears after. What appears on the high score list is always 0.01 seconds lower than the number on the timer. Is there something about the setTimeout method that would cause this, or am I just missing something?

Fiddle here: https://jsfiddle.net/nbsteuv/j9otp5ya/

Here's the code I'm using for the timer:

function timer(){
        if(starttimer=="true"){
            setTimeout(function(){
                i=i+0.01;
                $(".timer").html("<h1><center>"+ i.toFixed(2) + "</center></h1>");
                timer();
            },10);
        };
};

And here's the code that updates the high score list:

$(".stopbutton").click(function(){
        if(starttimer== "true"){
            starttimer= "false";
            updateScores(i);
            darken(".space");
        };
    });

function updateScores(newScore){

    if(newScore > highScore1){
        var redScore="score1";
        highScore5=highScore4;
        highScore4=highScore3;
        highScore3=highScore2;
        highScore2=highScore1;
        highScore1=newScore;
    }else if(newScore > highScore2){
        var redScore="score2";
        highScore5=highScore4;
        highScore4=highScore3;
        highScore3=highScore2;
        highScore2=newScore;
    }else if(newScore > highScore3){
        var redScore="score3";
        highScore5=highScore4;
        highScore4=highScore3;
        highScore3=newScore;
    }else if(newScore > highScore4){
        var redScore="score4";
        highScore5=highScore4;
        highScore4=newScore;
    }else if(newScore > highScore5){
        var redScore="score5";
        highScore5=newScore;
    };

    var highScorePlace1= "<div class='score' id='score1'><h1><center>" + highScore1.toFixed(2) + "</center></h1></div>";
    var highScorePlace2= "<div class='score' id='score2'><h1><center>" + highScore2.toFixed(2) + "</center></h1></div>";
    var highScorePlace3= "<div class='score' id='score3'><h1><center>" + highScore3.toFixed(2) + "</center></h1></div>";
    var highScorePlace4= "<div class='score' id='score4'><h1><center>" + highScore4.toFixed(2) + "</center></h1></div>";
    var highScorePlace5= "<div class='score' id='score5'><h1><center>" + highScore5.toFixed(2) + "</center></h1></div>";

    $("#highscores").append(highScorePlace1, highScorePlace2, highScorePlace3, highScorePlace4, highScorePlace5, resetButton);
    $("#highscores").slideDown(1000);
    $("#"+redScore).css("color", "red");
    $(".resetbutton").click(function(){
        gameReset();
    });
};

Full code, including variables and other functions, are in the fiddle.

score 1 · Accepted Answer · edited May 23 '17 at 12:23

It looks like when you click the stop button, the timer runs one more time, but the value of 'i' is set to the value it had when you clicked (0.01 less). You could simply add the 0.01 in the click event for the stop button, updateScores(i+0.01); or you could perhaps find a better way of doing it altogether :). Take a look at this satckoverflow answer: How to create a stopwatch using JavaScript?

Jquery: setTimeout Timer and Corresponding High Score List Do Not Match

1 Answers1