鼠标速度跟踪器的时间

Question

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

Answer 1

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

1. 跨浏览器，您可以使用Date.now()（或new Date().getTime()上真正的旧版本），它最多可以提供毫秒精度。你获得的数字是毫秒 - 自The-Epoch（1970年1月1日午夜，GMT）整数。在许多现代浏览器中，分辨率确实达到了毫秒级，但请注意，对于所有浏览器而言，这可能并非如此; RobG在a comment中指出某些浏览器的分辨率低至15毫秒，而其他浏览器的分辨率可能在3-4毫秒范围内。在我的测试中，Chrome 50，Firefox 46和IE11都提供了毫秒级的分辨率; IE8只能管理大约10ms的分辨率。

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

     

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

        

   注意

        

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

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

此代码段将测试您当前浏览器的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>