javascript - 鼠标速度跟踪器中的时间

Question

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

Answer 1

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

1. 跨浏览器，您可以使用 Date.now()(或在非常旧的浏览器上使用 new Date().getTime()) ，充其量是毫秒精度。您得到的数字是自大纪元以来的毫秒数(1970 年 1 月 1 日午夜，格林威治标准时间)作为一个整数。在许多现代浏览器上，分辨率确实是毫秒级的，但请注意，并非所有浏览器都如此； RobG 在 a comment 中指出，某些浏览器的分辨率低至 15ms，而其他浏览器可能在 3-4ms 范围内。在我的测试中，Chrome 50、Firefox 46 和 IE11 都提供了毫秒分辨率； IE8 只能处理大约 10 毫秒的分辨率。

2. 如果您只需要支持相当新的浏览器，您可以使用 performance.now() ( spec | MDN )，它返回一个 DOMHighResTimeStamp，它是一个 float -点数其中:

   ...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>