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次，每次"mouse"事件触发时显示onmousemove。

当鼠标静止时，它会变为："update" "update" "update" "update" ...
当鼠标移动时，它是："update" "mouse" "update" "mouse" ...

但有时候："update" "mouse" "update" "update" "mouse" ... 这就是废话，因为鼠标 IS 正在移动。

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

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

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

PS 1：fps越多，两个事件之间调用的update()就越多 PS 2：如果onmousemove在两个update()之间被触发多次，那就没问题了 PS 3：我试过document.addEventListener('mousemove')，它是一样的 PS 4：我在Mac上

Answer 1

这很不寻常......

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

两个测试片段。

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

在我的机器上，我连续获得最多9个鼠标事件和最多142/18个鼠标事件/帧事件，运行速度为60FPS

但是那说你可能会丢失鼠标事件。第二个片段故意阻止所有事件持续26ms（约30FPS），当我运行时，帧之间的最大鼠标事件为4，最大速率为115/45鼠标事件到帧事件。我每2.66秒丢失大约27个鼠标事件

但这仍然无法解释您的鼠标问题。

慢速鼠标的最可能原因是另一个事件监听器正在消耗鼠标事件。使用开发工具检查可能正在咀嚼事件的其他鼠标事件监听器。

除此之外，我只能看看OS鼠标设置可能是问题的根源。

另外请注意，在测试此页面上的代码时，帧之间的最大鼠标事件数为3（第二个片段），而不是我测试环境中的4个。原因未知????

鼠标事件V帧事件

＆＃13;

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

＆＃13;

body {
  font-family :Arial,"Helvetica Neue",Helvetica,sans-serif;
}
div {
  width : 100%;
}

＆＃13;

FPS : <div id="framerate"></div>
Mouse : <div id="mouserate"></div>
Max mouse events between frames : <div id="mousebet"></div>
Events : <div id="stream"></div>

＆＃13;

鼠标事件V阻止帧事件

＆＃13;

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

＆＃13;

    body {
      font-family :Arial,"Helvetica Neue",Helvetica,sans-serif;
    }
    div {
      width : 100%;
    }

＆＃13;

    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>

＆＃13;

鼠标即时速度在javascript中

1 个答案: