鼠标瞬间速度在javascript

mouse instant speed in javascript

本文关键字：javascript 速度 瞬间 鼠标      更新时间：2023-09-26

我想知道我的update()函数中鼠标的瞬时速度

但这是我的问题:当fps高(>30)时，update()有时在两个onmousemove事件之间触发两次。因此，即使鼠标在移动，它也被认为是静止的。

我认为这是关于setInterval()和onmousemove事件之间的关系。下面是重要的代码:

var fps = 60;
setInterval(update,1000/fps);
function update() {
    console.log('update');
}
document.onmousemove = function(){
    console.log('mouse');
}

每秒显示"update" 60次，每次onmousemove事件触发时显示"mouse"。

当鼠标静止时，它会显示:"update" "update" "update" "update"…
鼠标移动时为:"update" "mouse" "update" "mouse"…

但有时:"update" "mouse" "update" "update" "mouse"…这是扯淡，因为鼠标正在移动。

所以我尝试了不同的鼠标移动，看看是否有一个模式，但没有:圆圈，循环，直线……我还试过另一种鼠标，但这不是硬件问题。

我已经找到了部分解决方案。在每个update()处有一个counter++，在onmousemove处有一个counter=0，它允许我跳过一系列更新的第二个update()。但这并不完美，因为有时连续有3或4个update()。

.

是可解的吗?如何确保在2个onmousemove之间有且只有一个update() ?

PS 1: fps越多，两个事件之间调用的update()越多。
PS 2:如果onmousemove在两个update()之间被触发多次，这是可以的。
PS 3:我尝试了document.addEventListener('mousemove')，它是一样的。
PS 4:我在mac上

这是不寻常的…

鼠标事件应该比每30毫秒触发一次更频繁。

两个测试片段。

第一个片段记录鼠标移动和帧更新，并将显示事件流，加上每160个事件的最大鼠标事件，以及一行中的最大鼠标事件。

在我的机器上，我在一行中获得最多9个鼠标事件和最多142/18个鼠标事件/帧事件，以60FPS运行

但也就是说你可以丢失鼠标事件。第二个片段故意在26ms(约30FPS)内阻塞所有事件，当我运行它时，帧之间的最大鼠标事件是4，最大速率是115/45鼠标事件到帧事件。我每2.66秒失去大约27个鼠标事件

但这仍然不能解释你的鼠标问题。

鼠标慢的最可能原因是另一个事件侦听器正在使用鼠标事件。使用开发工具检查是否有其他的鼠标事件监听器正在吞噬事件。

除此之外，我能说的就是看看操作系统的鼠标设置，这可能是问题的根源。

额外注意，当测试此页上的代码时，帧之间的最大鼠标事件是3(第二个代码片段)，而不是我的测试环境中的4。原因未知? ?

鼠标事件V帧事件 

var lastTime = 0;
var max = 0;
var maxInARow = 0;
var inARow = 0;
var record = [];
function recordEvent(type){
  record.push(type);
  if(record.length > 160){
    record.shift();
  }
}
document.addEventListener("mousemove",function(){
  recordEvent(".");
  inARow += 1;
});
function update(time){
  recordEvent("|");  
  var count = 0;
  for(var i = 0; i < record.length;i ++){
      if(record[i] === "."){
        count += 1;
      }    
  }
  maxInARow = Math.max(inARow,maxInARow);
  mousebet.textContent = maxInARow;
  inARow = 0;
  mouserate.textContent = "Max : "+ max +"/"+(record.length - max)+ " Current : " + count +"/"+(record.length - count) ;
  framerate.textContent = (1000 / (time-lastTime)).toFixed(0);
  lastTime = time;
  stream.textContent = record.join("");
  if(max < count && record.length === 160){
      var div = document.createElement("div");
      div.textContent = stream.textContent;
      document.body.appendChild(div);
  }
  max = Math.max(max,count);
  requestAnimationFrame(update);
}
requestAnimationFrame(update);
body {
  font-family :Arial,"Helvetica Neue",Helvetica,sans-serif;
}
div {
  width : 100%;
}
FPS : <div id="framerate"></div>
Mouse : <div id="mouserate"></div>
Max mouse events between frames : <div id="mousebet"></div>
Events : <div id="stream"></div>

鼠标事件V阻塞帧事件 

    var lastTime = 0;
    var max = 0;
    var maxInARow = 0;
    var inARow = 0;
    var record = [];
    function recordEvent(type){
        
      record.push(type);
      if(record.length > 160){
        record.shift();
      }
    }
    function mouseE(){
      recordEvent(".");
      inARow += 1;
    };
    document.addEventListener("mousemove",mouseE);
    function update(time){  
      if(performance){
        var n = performance.now();
      }else{
        document.body.innerHTML = "FAILED no performance API."
        document.removeEventListener("mousemove",mouseE);
        return;
      }      
      
      recordEvent("|");  
      var count = 0;
      for(var i = 0; i < record.length;i ++){
          if(record[i] === "."){
            count += 1;
          }    
      }
      maxInARow = Math.max(inARow,maxInARow);
      mousebet.textContent = maxInARow;
      inARow = 0;
      max = Math.max(max,count);
      mouserate.textContent = "Max : "+ max +"/"+(record.length - max)+ " Current : " + count +"/"+(record.length - count) ;
      framerate.textContent = (1000 / (time-lastTime)).toFixed(0);
      lastTime = time;
      stream.textContent = record.join("");
      // block javascript context till 28 ms used up;
      while(performance.now() - n < 26);
      requestAnimationFrame(update);
    }
    requestAnimationFrame(update);
    body {
      font-family :Arial,"Helvetica Neue",Helvetica,sans-serif;
    }
    div {
      width : 100%;
    }
    26ms Blocking frame Event test <br>
    FPS : <div id="framerate"></div>
    Mouse : <div id="mouserate"></div>
    Max mouse events between frames : <div id="mousebet"></div>
    Events : <div id="stream"></div>

相关文章：