Question

我正在尝试编写测试代码，让人们通过音乐获取频率。这是没有音乐的东西，但人们可以点击他们的笔记本电脑触摸板来获取数据。但是，数据似乎不够准确，例如它至少是200毫秒。当我们稳定地点击它时，它提供了一个非常可变的结果。有人可以告诉我如何改进吗？

这是我的代码：

    <!DOCTYPE html>
<html onclick="myFunction()">
  <head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <title>Click</title>
  </head>
  <body>
    <script>
    function myFunction() {
      inner = document.getElementById("time").innerHTML;
      if(inner === ""){
        document.getElementById("time").innerHTML = Date();
      }
      else{
        var curr = new Date();
        console.log(curr);
        var past = new Date(inner);
        console.log(inner);
        console.log(past);
        var gap = curr.getTime() - past.getTime();
        console.log(gap);
        document.getElementById("time").innerHTML = curr;
        var gapText = document.getElementById("gap").innerHTML;
        gapText = gapText + gap + "<br>";
        document.getElementById("gap").innerHTML = gapText;
      }
    }
    </script>
    <div><text>The current time is </text><text id="time"></text></div>
    <div><text>The tap durations are (milliseconds):</text></div>
    <div><text id="gap"></text></div>

  </body>
</html>

Answer 1

我在Chrome上运行的MacBook Pro上的代码也有很大的时差差异。然后我重构了你的代码并获得了明显更好的性能，通常在~30ms之内。 Matthew Herbst是对的，硬件将起到一个作用，但我认为有一些方法可以提高性能。我重构的代码如下，但有几点意见：

取出所有的console.logs。它们不会对性能产生太大影响，但是当你担心几毫秒时，它们会这样做。
只有在必要时才与DOM交互。例如，您要去DOM获取最后一个时间戳，以便计算当前值。将其保存在变量中，速度更快。

这是我的代码，让我知道它对你有多好。希望这会有所帮助。

   <!DOCTYPE html>
<html onclick="myFunction()">
  <head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <title>Click</title>
  </head>
  <body>
    <script>
    var newTime;
    function myFunction() {

      if (newTime === undefined){
        newTime = new Date();
        // This will only run once
        document.getElementById("time").innerHTML = newTime;
      }
      else{
        // Here I'm not getting values from the DOM. I'm saving the value as a variable. 
        var oldTime = newTime;
        newTime = new Date();
        var gap = newTime.getTime() - oldTime.getTime();
        var gapText = gap + "<br>";
        document.getElementById("gap").innerHTML = gapText;
      }
    }
    </script>
    <div><text>The current time is </text><text id="time"></text></div>
    <div><text>The tap durations are (milliseconds):</text></div>
    <div><text id="gap"></text></div>

  </body>
</html>

如何在html中获得准确的持续时间

1 个答案: