javascript - Time in mouse velocity tracker -


building function track velocity of mouse best time can get?to build function have time/distance , more accurate in type of function date taken.but type of date?the time taken until point?milliseconds or more?

in javascript on browsers, have 2 options:

  1. cross-browser, can use date.now() (or new date().gettime() on old ones) gives you, @ best, millisecond precision. number milliseconds-since-the-epoch (jan 1st 1970 @ midnight, gmt) whole number. on many modern browsers, resolution indeed to-the-millisecond, note that may not true browsers; robg points out in a comment browsers have resolution low 15ms while others may in 3-4ms range. in tests, chrome 50, firefox 46, , ie11 provide to-the-millisecond resolution; ie8 manages 10ms resolution.

  2. if need support up-to-date browsers, can use performance.now() (spec | mdn), returns domhighrestimestamp floating-point number which:

    ...should represent time in milliseconds accurate 5 microseconds...

    note

    if user agent unable provide time value accurate 5 microseconds due hardware or software constraints, user agent can represent domhighrestimestamp time in milliseconds accurate millisecond.

    so if browser supports it, required @ least have millisecond resolution , ideally much, better (via fractional values).

this snippet test current browser's date object resolution (here's off-site version work on older browsers ie8):

(function() {    "use strict";      if (!date.now) {      date.now = function() {        return new date().gettime();      };    }      var testcount = document.getelementbyid("testcount");    var resolution = document.getelementbyid("resolution");      document.getelementbyid("the-button").onclick = function() {      var sum = 0;      var n = 0;        log("checking browser's date object resolution...");      document.getelementbyid("results").style.display = "";      settimeout(batch, 50);        function batch() {        var target = n + 1000;        while (n < target) {          sum += test();          ++n;        }        testcount.innerhtml = n;        resolution.innerhtml = (sum / n) + "ms";        if (n < 10000) {          settimeout(batch, 50);        } else {          log("done");        }      }    };      function test() {      var x = date.now();      var y;      {        y = date.now();      } while (x == y);      return y - x;    }      function log(msg) {      var p = document.createelement("p");      p.appendchild(document.createtextnode(msg));      document.body.appendchild(p);    }  })();
<input type="button" id="the-button" value="test">  <div id="results" style="display: none">    tests far: <span id="testcount">0</span>    <br>rough resolution: <span id="resolution"></span>  </div>

this snippet test current browser's performance.now() resolution, if supports it:

(function() {    "use strict";        if (typeof performance !== "object" || !performance.now) {      log("your browser doesn't support performance.now()");      return;    }      var testcount = document.getelementbyid("testcount");    var resolution = document.getelementbyid("resolution");      document.getelementbyid("the-button").onclick = function() {      var sum = 0;      var n = 0;        log("checking browser's performance.now() resolution...");      document.getelementbyid("results").style.display = "";      settimeout(batch, 50);        function batch() {        var target = n + 1000;        while (n < target) {          sum += test();          ++n;        }        testcount.innerhtml = n;        resolution.innerhtml = (sum / n) + "ms";        if (n < 10000) {          settimeout(batch, 50);        } else {          log("done");        }      }    };      function test() {      var x = performance.now();      var y;      {        y = performance.now();      } while (x == y);      return y - x;    }      function log(msg) {      var p = document.createelement("p");      p.appendchild(document.createtextnode(msg));      document.body.appendchild(p);    }  })();
<input type="button" id="the-button" value="test">  <div id="results" style="display: none">    tests far: <span id="testcount">0</span>    <br>rough resolution: <span id="resolution"></span>  </div>