鼠标速度跟踪器中的时间

Question

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

Answer 1

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

1. 跨浏览器，您可以使用Date.now()（或new Date().getTime() 用于真正旧的浏览器），它最多可以提供毫秒精度。你得到的数字是毫秒-since-The-Epoch（1970 年 1 月 1 日午夜，格林威治标准时间）作为一个整数。在许多现代浏览器上，分辨率确实是毫秒级的，但请注意，这可能不适用于所有浏览器； RobG 在 a comment 中指出，一些浏览器的分辨率低至 15 毫秒，而其他浏览器的分辨率可能在 3-4 毫秒范围内。在我的测试中，Chrome 50、Firefox 46 和 IE11 都提供毫秒级的分辨率； IE8 只管理大约 10ms 的分辨率。

2. 如果您只需要支持最新的浏览器，您可以使用performance.now() (spec | MDN)，它返回一个DOMHighResTimeStamp，它是一个浮点数，它：

   ...应该以毫秒为单位表示时间，精确到 5 微秒...

   注意

   如果用户代理由于硬件或软件限制而无法提供精确到 5 微秒的时间值，则用户代理可以将DOMHighResTimeStamp 表示为精确到毫秒的时间。

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

此 sn-p 将测试您当前浏览器的 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>

这个 sn-p 将测试你当前浏览器的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>