javascript - How would I find the difference between two button clicks in milliseconds?

I'm trying to make a program that tests your reaction time, but I don't know how to measure the time between two events, like button clicks. Here's my code so far. Thanks in advance to anyone that can help.

<!DOCTPYE html>
<html>
   <head>
      <script>
         var button = document.getElementById("reactionTester");
         var start = document.getElementById("start");
         function init() {
            var startInterval/*in milliseconds*/ = Math.floor(Math.random() * 30) * 1000;
            setTimeout(startTimer, startInterval);

         }

         function startTimer() {
            /*start timer and then later use stopTimer() to stop the timer and find 
             the difference bettween both button clicks.*/
         }
      </script>
   </head>
   <body>
      <form id="form">
         <input type="button" id="reactionTester" onclick="stopTimer()">
         <input type="button" value="start" id="start" onclick="init()">
      </form>
   </body>
</html>

<!DOCTPYE html>
<html>
   <head>
      <script>
         var button = document.getElementById("reactionTester");
         var start = document.getElementById("start");
         function init() {
            var startInterval/*in milliseconds*/ = Math.floor(Math.random() * 30) * 1000;
            setTimeout(startTimer, startInterval);

         }

         function startTimer() {
            /*start timer and then later use stopTimer() to stop the timer and find 
             the difference bettween both button clicks.*/
         }
      </script>
   </head>
   <body>
      <form id="form">
         <input type="button" id="reactionTester" onclick="stopTimer()">
         <input type="button" value="start" id="start" onclick="init()">
      </form>
   </body>
</html>

Share Improve this question edited Jan 2, 2014 at 20:54 zero298 26.9k10 gold badges79 silver badges107 bronze badges asked Jan 2, 2014 at 20:50 James Dorfman 1,8186 gold badges20 silver badges40 bronze badges

4 You don't need setTimeout. When the user clicks on the first button, put the time in a variable. When they click on the second button, subtract that time from the current time. – Barmar Commented Jan 2, 2014 at 20:52
Dreamweaver want you to remove the */ from after the setTimeout – Phlume Commented Jan 2, 2014 at 20:53

Add a ment |

5 Answers 5

Sorted by: Reset to default 8

var startTime;

function startButton() {
    startTime = Date.now();
}

function stopButton() {
    if (startTime) {
        var endTime = Date.now();
        var difference = endTime - startTime;
        alert('Reaction time: ' + difference + ' ms');
        startTime = null;
    } else {
        alert('Click the Start button first');
    }
}

Bind your start and stop buttons to these functions.

DEMO

For getting the time that has passed, you'll always need a start_time and end_time. startTimer() should set a start_time variable (or something similarly named), and stopTimer() should set an end_time variable.

stopTimer() can then subtract the two times and you've got the number of milliseconds passed.

(JavaScript stores times in milliseconds, so oldTime - newTime = milliseconds passed.)

Edit: Example JSFiddle - http://jsfiddle/L3Xha/

var startTime, endTime;

// self-executing function
(function(){
    //    init the background to white
    document.body.style.background = "white";

    //    reset the color of the BG after 3 seconds.
    setTimeout(
        function(){
            document.body.style.background = "red";
            startTime = Date.now();
        }
    , 3000);

    $("#go").on("click", function(){
        stopTime = Date.now();

        $("#reflex").text(
            "Your time was " + (stopTime - startTime) + "ms."
        );
    });
})();

Keep track of the time of the first click, and on the second click, display the difference between now and the first click.

var start;

$('button').click(function() {
  if (undefined === start) {
    start = new Date().getTime();
    return;
  }

  alert('Time difference is:' + (new Date.getTime() - start));
});

To measure millseconds between two button clicks, log timestamps in javascript

First Button:

document.getElementById('submit-button1').onclick = function() {
   console.log(new Date().getTime());       //1388696290801
}

Second Button:

document.getElementById('submit-button2').onclick = function() {
   console.log(new Date().getTime());      //1388696292730
}

You don't need a form, you just need buttons, you don't need intervals either. You also don't need jQuery.

<!DOCTPYE html>
<html>
   <head>
      <script>
         var startTime, running;
         function startStop() {
            if (running) {
               var timeTaken = Date.now() - startTime;
               running = false;
               console.log("Time: " + timeTaken);
            }
            else {
               running = true;
               startTime = Date.now();
            }
         }
      </script>
   </head>
   <body>
      <button onclick="startStop();">Start/Stop</button>
   </body>
</html>

Edit

Date.now() is probably faster.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How would I find the difference between two button clicks in milliseconds? - Stack Overflow

5 Answers 5