Javascript'te garip zamanlama davranışı

Question

Kinetik kaydırmayı (bu iyi bir fikir olsun ya da olmasın soru değil) uygulamaya çalışıyordum ve bazı "garip" davranışlar yaşadım.

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(); 
     }); 

sorun genellikle deltaTime negatif hale gelir, ne eksik?

Düzenleme: Bu yardımcı olursa Chromium 51.0.2704.79 Ubuntu 14.04 (64-bit) kullanıyorum. @Whothehellisthat zaten onun yorumunda işaret ettiği gibi

Answer 1

:

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>

:

RAF damgası İşte

ispatlanmış olması bir küçük örnektir çok güvenilir değildir

Basit bir çözüm var. RAF zamanı üzerinden zaman damgası almanıza gerek kalmadan, yönteminizin başında var timestamp = performance.now();'u kullanabilirsiniz.

İşte bir çalışma örneği:

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>