Question

我一直在尝试找出如何使用JavaScript获取鼠标的轮询率。我已经搜索了大部分SO问题，但似乎没有一个问题能引导我走上正确的道路。当我进行研究时，遇到了this site，这正是我一直在寻找的东西，但是我不确定他们是如何实现的。有人可以帮我解决这个问题吗？

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

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 + ' Hz\x0A');
    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>

基本上，它每隔1毫秒读取一次鼠标位置，如果位置发生变化，它将检查自上次更改以来经过的时间。目的是获得每秒读取几次位置（hz）的信息。现在，在您提供的链接中，它们添加了一个平均值，但实际上并不代表任何含义……唯一可以得到的准确值是鼠标以比其频率更快的速度移动时所获得的值。就我而言，当我使用此脚本并在屏幕中快速移动时，我得到125hz，这意味着即使我不断移动鼠标，该值也至少要花费8ms才能改变。

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

1 个答案: