如何使用脚本检测鼠标轮询速率?

Question

我一直在试图弄清楚如何使用JavaScript获取鼠标的轮询率。我已经搜索了大多数SO问题，但没有一个似乎引导我走上正确的道路。当我做研究时，我遇到了这个网站，这正是我正在寻找的，但是我不确定他们是如何实现这一目标的。有人可以帮我解决这个问题吗？

在网站上挖掘更多内容，我能够找到以下代码，但是我无法完全理解它。有人可以对此有所了解吗？ 如何在不窃取代码的情况下复制它？我希望能够理解这一点，以便我可以尝试编写自己的内容。

var fps = 4;
var count = 0;
var tick = 0;
var total = 0;
var tmr = null;
var testExp = new RegExp('Android|webOS|iPhone|iPad|' + 'BlackBerry|Windows Phone|' + 'Opera Mini|IEMobile|Mobile', 'i');
var isDesktop = !(testExp['test'](navigator['userAgent']));
var isSafari = /^((?!chrome|android).)*safari/i ['test'](navigator['userAgent']);
var isIE = false || !!document['documentMode'];
var body = document['querySelector']('body');
var divCanvas = document['createElement']('DIV');
var current = document['createElement']('TEXTAREA');
var average = document['createElement']('P');
var canvas;
var ctx;
body['appendChild'](divCanvas);
body['appendChild'](average);
current['cols'] = '10';
current['rows'] = '20';
current['readOnly'] = true;
current['style']['fontSize'] = '14px';
current['style']['position'] = 'absolute';
current['style']['top'] = '10px';
current['style']['right'] = '20px';
current['style']['color'] = 'white';
current['style']['backgroundColor'] = 'black';
average['style']['position'] = 'absolute';
average['style']['top'] = '190px';
average['style']['left'] = '35%';
average['style']['width'] = '400px';
average['style']['color'] = '#CC0040';
average['style']['backgroundColor'] = 'black';
function updateCount() {
tick++;
total += count;
var _0x1d38x11 = document['createTextNode'](count * fps + ' Hzx0A');
current['appendChild'](_0x1d38x11);
current['scrollTop'] = current['scrollHeight'];
var _0x1d38x12 = canvas['width'] / 2 - 200;
ctx['fillStyle'] = 'black';
ctx['fillRect'](_0x1d38x12, 190, 400, 60);
var _0x1d38x13 = 'Average: ';
var _0x1d38x14 = Math['ceil'](fps * total / tick);
var _0x1d38x15 = ' Hz';
ctx['textAlign'] = 'left';
ctx['font'] = '40px Montserrat, Arial, sans-serif';
ctx['fillStyle'] = 'white';
ctx['fillText'](_0x1d38x13, _0x1d38x12, 240);
var _0x1d38x16 = ctx['measureText'](_0x1d38x13);
ctx['font'] = '60px Montserrat, Arial, sans-serif';
ctx['fillStyle'] = '#CC0040';
var _0x1d38x17 = ctx['measureText'](_0x1d38x14);
ctx['fillText'](_0x1d38x14, _0x1d38x12 + _0x1d38x16['width'], 240);
ctx['font'] = '40px Montserrat, Arial, sans-serif';
ctx['fillStyle'] = 'white';
ctx['fillText']('Hz', _0x1d38x12 + _0x1d38x16['width'] + _0x1d38x17['width'], 240);
count = 0;
if (tick > 3 * fps) {
tick = 0;
total = 0
}
}
function degToRad(_0x1d38x19) { var _0x1d38x1a = Math['PI'] / 180 * _0x1d38x19; return _0x1d38x1a }
function eventWindowLoaded() { canvasDraw() }
var x = 50;
var y = 50;
function canvasDraw() {
if (x > canvas['clientWidth'] + 20) { x = 0 };
if (y > canvas['clientHeight'] + 20) { y = 0 };
if (x < -20) { x = canvas['clientWidth'] };
if (y < -20) { y = canvas['clientHeight'] };
ctx['fillStyle'] = 'white';
ctx['textAlign'] = 'center';
ctx['font'] = '60px Montserrat, Arial, sans-serif';
ctx['fillText']('Mouse Rate Checker', canvas['width'] / 2, 100);
ctx['font'] = '40px Montserrat, Arial, sans-serif';
ctx['fillText']('Please click and move your mouse to start.', canvas['width'] / 2, 160)
}
function lockChangeAlert() {
count = 0;
tick = 0;
total = 0;
if (document['pointerLockElement'] === canvas || document['mozPointerLockElement'] === canvas) {
document['addEventListener']('mousemove', canvasLoopMm, false);
if (tmr) { clearInterval(tmr) };
tmr = setInterval(updateCount, 1000 / fps)
} else {
document['removeEventListener']('mousemove', canvasLoopMm, false);
clearInterval(tmr);
tmr = null
}
}
function canvasLoop(_0x1d38x21) {
var _0x1d38x22 = _0x1d38x21['movementX'] || _0x1d38x21['mozMovementX'] || 0;
var _0x1d38x23 = _0x1d38x21['movementY'] || _0x1d38x21['mozMovementY'] || 0;
x += _0x1d38x22;
y += _0x1d38x23
}
function canvasLoopMm(_0x1d38x25) {
var _0x1d38x26 = 'getCoalescedEvents' in _0x1d38x25 ? _0x1d38x25['getCoalescedEvents']() : [_0x1d38x25];
for (e in _0x1d38x26) {
canvasLoop(e);
count++
}
}
function divLoopMm(_0x1d38x21) { count++ }
var w = window['innerWidth'] || document['documentElement']['clientWidth'] || document['body']['clientWidth'];
var h = window['innerHeight'] || document['documentElement']['clientHeight'] || document['body']['clientHeight'];
if (!isDesktop) {
console['log']('DOES NOT SUPPORT MOBILE DEVICES');
var h1 = document['createElement']('H1');
h1['innerHTML'] = 'Mouse Rate Checker';
divCanvas['appendChild'](h1);
average['innerHTML'] = 'Can't be used on mobile devices'
} else {
if (isSafari || isIE) {
divCanvas['setAttribute']('style', 'width:' + w + 'px');
divCanvas['setAttribute']('style', 'height:' + h + 'px');
var h1 = document['createElement']('H1');
h1['innerHTML'] = 'Mouse Rate Checker';
divCanvas['appendChild'](h1);
average['innerHTML'] = 'Does not support IE or Safari.'
} else {
body['appendChild'](current);
window['addEventListener']('load', eventWindowLoaded, false);
canvas = document['createElement']('CANVAS');
divCanvas['appendChild'](canvas);
ctx = canvas['getContext']('2d');
canvas['setAttribute']('width', w);
canvas['setAttribute']('height', h);
window['onclick'] = function () {
count = 0;
tick = 0;
total = 0;
if (tmr) {
clearInterval(tmr);
document['removeEventListener']('pointermove', canvasLoopMm);
tmr = null
} else {
document['addEventListener']('pointermove', canvasLoopMm);
if (tmr) { clearInterval(tmr) };
tmr = setInterval(updateCount, 1000 / fps)
}
}
}
}

Answer 1

在这里，我做了一个快速的例子来说明如何做到这一点：

<div id="frequency"></div>
<script>
var frequency = 0;
var pos;
var lasttime = 0;
var mousePos = {};
mousePos.x = 0;
mousePos.y = 0;
document.onmousemove = handleMouseMove;
setInterval(getMousePosition, 1); // setInterval repeats every X ms
function handleMouseMove(event) {
var dot, eventDoc, doc, body, pageX, pageY;
event = event || window.event; // IE-ism
mousePos = {
x: event.pageX,
y: event.pageY
};
}
function getMousePosition() {
var newpos = mousePos.x+'_'+mousePos.y;
if (pos != newpos) {
var newtime = window.performance.now();
var elapsed_time = newtime-lasttime;
var newfrequency = parseInt(1000/elapsed_time);
if(newfrequency > frequency){
frequency = newfrequency;
document.getElementById('frequency').innerHTML = frequency+'hz';
}
pos = newpos;
lasttime = newtime;
}
}
</script>

基本上，它每 1ms 读取一次鼠标位置，如果位置发生变化，它会检查自上次更改以来经过的时间。目标是获取每秒读取位置的次数 (hz(。现在在您提供的链接中，他们添加了平均值，但这实际上没有任何意义......您可以从中获得的唯一准确值是当鼠标移动速度超过其频率时将获得的值。就我而言，当我使用此脚本并在屏幕中快速移动时，我得到 125hz，这意味着即使我不断移动鼠标，值也总是需要至少 8 毫秒才能更改。