javascript - javascript中的鼠标即时速度

Question

我想知道 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() 处使用 counter++，并在 onmousemove 时使用 counter=0，它允许我跳过更新序列中的第二个 update()。但它并不完美，因为有时连续有 3 或 4 个 update()。

.

可以解决吗？如何确定 2 个 onmousemove 之间只有一个 update() ？

<小时/>

PS 1:fps 越多，两个事件之间调用的 update() 次数就越多。
PS 2:在两次update()之间多次触发onmousemove也可以。
PS 3:我尝试了 document.addEventListener('mousemove')，它是一样的。
PS 4:我使用的是 Mac

Answer 1

这很不寻常..

鼠标事件的触发频率应该远高于每 30 毫秒一次。

两个测试片段。

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

在我的机器上，我连续收到最多 9 个鼠标事件和最多 142/18 个鼠标事件/帧事件，以 60FPS 运行

但这就是说你可能会丢失鼠标事件。第二个片段故意阻止所有事件 26 毫秒(约 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>