151

I created a simple game that start and ends the timer when the user finishes clicking on 16 boxes.

I want to measure the elapsed time for the user to complete the game. How do I do it using Javascript?

I took a look at different answers like this, but I had hard time understanding others' code.

I would assume it to look like this.

Timer Start: When user clicks the first box
Timer End: When user clicks the last box
Leonard
  • 2,978
  • 6
  • 21
  • 42
  • 1
    Store the time in millisecond when the user have started then at the end substract one with the other to have the time elapsed in milliseconds. I let you do a bit of research because you didn't seems to have done a lot yet – AxelH Jan 13 '17 at 10:56
  • 1
    Further duplicate: http://stackoverflow.com/questions/313893/how-to-measure-time-taken-by-a-function-to-execute – icc97 Jan 13 '17 at 11:01

1 Answers1

266

The Date documentation states that :

The JavaScript date is based on a time value that is milliseconds since midnight January 1, 1970, UTC

Click on start button then on end button. It will show you the number of seconds between the 2 clicks.

The milliseconds diff is in variable timeDiff. Play with it to find seconds/minutes/hours/ or what you need

var startTime, endTime;

function start() {
  startTime = new Date();
};

function end() {
  endTime = new Date();
  var timeDiff = endTime - startTime; //in ms
  // strip the ms
  timeDiff /= 1000;

  // get seconds 
  var seconds = Math.round(timeDiff);
  console.log(seconds + " seconds");
}
<button onclick="start()">Start</button>

<button onclick="end()">End</button>

OR another way of doing it for modern browser

Using performance.now() which returns a value representing the time elapsed since the time origin. This value is a double with microseconds in the fractional.

The time origin is a standard time which is considered to be the beginning of the current document's lifetime.

var startTime, endTime;

function start() {
  startTime = performance.now();
};

function end() {
  endTime = performance.now();
  var timeDiff = endTime - startTime; //in ms 
  // strip the ms 
  timeDiff /= 1000; 
  
  // get seconds 
  var seconds = Math.round(timeDiff);
  console.log(seconds + " seconds");
}
<button onclick="start()">Start</button>
<button onclick="end()">End</button>
Weedoze
  • 13,683
  • 1
  • 33
  • 63
  • 1
    Thank you for your kind answer! Very very clear and easy to understand! I'll play with this to apply to my code! – Leonard Jan 13 '17 at 11:13
  • 5
    This is not reliable at all. In modern browsers, the best bet is to use `performance.now()` to measure the duration between two instants. In the answer above, replace `new Date()` with `performance.now()`. https://developer.mozilla.org/en-US/docs/Web/API/Performance/now – Rodolfo Carvalho Mar 24 '20 at 12:05
  • @RodolfoCarvalho Could you please explain further why it is not reliable at all ? – Weedoze Mar 24 '20 at 12:24
  • 2
    There are similar questions here on SO (the one here is marked as duplicate). Unfortunately, not all of them point in the right direction. Since I could not add an answer, I wanted to warn people coming here. In short, using `new Date()` is not reliable because it is influenced by the system clock. It can result in negative durations among other unexpected outputs. Please see this answer for a longer rant https://stackoverflow.com/a/15641427. And see the note about calculating elapsed time in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Examples. – Rodolfo Carvalho Mar 25 '20 at 13:22