鼠标速度跟踪器中的时间

Question

构建一个函数来跟踪鼠标的速度什么是我们可以获得的最佳时间？要构建这样的函数我们必须做 time/distance 并且通常在这种类型的函数中更准确日期是 taken.But 什么类型的日期？时间是到什么时候？毫秒或更多？

Answer 1

在浏览器的 JavaScript 中，您有两个选择：

跨浏览器，您可以使用 Date.now()（或 new Date().getTime() 在非常老的浏览器上），它最多只能提供毫秒精度。您得到的数字是自大纪元以来的毫秒数（1970 年 1 月 1 日午夜，格林威治标准时间）作为一个整数。在许多现代浏览器上，分辨率确实是毫秒级的，但请注意，并非所有浏览器都如此； RobG points out in 某些浏览器的分辨率低至 15 毫秒，而其他浏览器可能在 3-4 毫秒范围内。在我的测试中，Chrome 50、Firefox 46 和 IE11 都提供了毫秒分辨率； IE8 只能处理大约 10 毫秒的分辨率。
如果你只需要支持最新的浏览器，你可以使用performance.now()（spec | MDN), which returns a DOMHighResTimeStamp这是一个浮点数：

...SHOULD represent a time in milliseconds accurate to 5 microseconds...

NOTE

If the User Agent is unable to provide a time value accurate to 5 microseconds due to hardware or software constraints, the User Agent can represent a DOMHighResTimeStamp as a time in milliseconds accurate to a millisecond.

因此，如果浏览器支持它，则需要至少具有毫秒级分辨率，理想情况下比那好得多（通过小数值）。

此代码段将测试您当前浏览器的 Date 对象分辨率（here's an off-site version 适用于 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 this 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;
    do {
      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 so far: <span id="testcount">0</span>
  <br>Rough resolution: <span id="resolution"></span>
</div>

此代码段将测试您当前浏览器的 performance.now() 分辨率（如果支持）：

(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 this 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;
    do {
      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 so far: <span id="testcount">0</span>
  <br>Rough resolution: <span id="resolution"></span>
</div>

鼠标速度跟踪器中的时间

Time in mouse velocity tracker

javascript

html

css

date

milliseconds