javascript - JavaScript 中奇怪的计时行为

Question

我在尝试实现动态滚动(这不是个好主意不是问题)并遇到了一些“奇怪”的行为。

function scroll(timestamp){
    var deltaTime = timestamp - this.scrollLastTime;
    this.scrollLastTime = timestamp;
    console.log(deltaTime);
    var newPosition = this.scrollTop + this.scrollSpeed*deltaTime;
    if(newPosition <= 0){
      this.scrollTop = 0;
      this.scrolling = false;
      return;
    }else if(newPosition > this.scrollHeight-this.clientHeight){
      this.scrollTop = this.scrollHeight-this.clientHeight;
      this.scrolling = false;
    }else{
      this.scrollTop = newPosition;
      var newSpeed = this.scrollSpeed + Math.sign(this.scrollSpeed) * this.scrollAcceleration*deltaTime;
      if(this.scrollSpeed < 0 && newSpeed >= 0){
        this.scrolling = false;
      }else if(this.scrollSpeed >0 && newSpeed <= 0){
        this.scrolling = false;
      }else{
        this.scrollSpeed = newSpeed;
        window.requestAnimationFrame(this.scrollCallback);
      }
    }
  }
  document.getElementById("0").addEventListener('wheel',
        function(e){
            this.scrollSpeed = e.wheelDelta/100;
            if(!this.scrolling){
              this.scrolling = true;
              this.scrollLastTime = performance.now();
              this.scrollAcceleration = -0.01;
              if(!this.scrollCallback)this.scrollCallback = scroll.bind(this);
              window.requestAnimationFrame(this.scrollCallback);
            }
            e.preventDefault();
        });

问题是 deltaTime 经常变成负数，我错过了什么？

编辑:如果有帮助，我正在使用 Chromium 版本 51.0.2704.79 Ubuntu 14.04(64 位)。

Answer 1

正如@Whothehellisthat 已经在他的评论中指出的那样:

the rAF timestamp isn't very reliable

这里有一个小例子来证明:

document.getElementById("button").addEventListener('click', function(e){
        this.valueOfPerformanceNow = performance.now();
        if(!this.clickCallback)this.clickCallback = printTime.bind(this);
        window.requestAnimationFrame(this.clickCallback);
});

function printTime(timestamp){
  $("#perfromanceNow").val(this.valueOfPerformanceNow);
  $("#delta").val(timestamp-this.valueOfPerformanceNow);
  $("#timestamp").val(timestamp);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="submit" id="button" value="print current time"><br>
  <label>performance.now():</label>
  <input type="text" id="perfromanceNow" readonly><br>
  <label>timestamp:</label>
  <input type="text" id="timestamp" readonly><br>
   <label>delta:</label>
  <input type="text" id="delta" readonly>
<div>

有一个简单的解决方法。您可以在方法的开头使用 var timestamp = performance.now(); 而不是通过 rAF 时间获取时间戳。

这是一个工作示例:

document.getElementById("button").addEventListener('click', function(e){
        this.valueOfPerformanceNow = performance.now();
        if(!this.clickCallback)this.clickCallback = printTime.bind(this);
        window.requestAnimationFrame(this.clickCallback);
});

function printTime(){
  var timestamp = performance.now();
  $("#perfromanceNow").val(this.valueOfPerformanceNow);
  $("#delta").val(timestamp-this.valueOfPerformanceNow);
  $("#timestamp").val(timestamp);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="submit" id="button" value="print current time with new timestamp initialization"><br>
  <label>performance.now():</label>
  <input type="text" id="perfromanceNow" readonly><br>
  <label>timestamp:</label>
  <input type="text" id="timestamp" readonly><br>
   <label>delta:</label>
  <input type="text" id="delta" readonly>
<div>