¿Cuál es la mejor manera de rastrear la velocidad del mouse con JS/JQuery simple? Me gustaría rastrear qué tan rápido un usuario mueve el mouse en todas las direcciones (arriba/abajo/izquierda/derecha).Controle la velocidad del mouse con JS
Sparklines has a nifty example de seguimiento del movimiento del mouse y graficarlo. Su código está disponible en la fuente de su sitio a partir de la línea 315.
Simple y efectivo.
Aquí está el código:
var mrefreshinterval = 500; // update display every 500ms
var lastmousex=-1;
var lastmousey=-1;
var lastmousetime;
var mousetravel = 0;
$('html').mousemove(function(e) {
var mousex = e.pageX;
var mousey = e.pageY;
if (lastmousex > -1)
mousetravel += Math.max(Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey));
lastmousex = mousex;
lastmousey = mousey;
});
La misma manera que presentamos lo mejor velocidad para cualquier otra cosa:
speed = distance/time
acceleration = speed/time
y uso:
$(document).mousemove(function(e){
var xcoord = e.pageX;
var ycoord = e.pageY;
});
Para obtener las coordenadas del ratón cada vez que el ratón se mueve.
Sí, pero necesita al menos dos movimientos del mouse para tener la hora correcta. Supongamos que mueve el mouse a [5, 5] y luego se congela durante 10 segundos. Luego se mueve rápidamente a [10, 5] en una fracción de segundo, la salida sería de 10 píxeles en 10 segundos, porque cuando llegó a [5, 5] fue la última vez que registró la marca de tiempo. Sé que para el movimiento del mouse el primer movimiento real a menudo no importa porque estás disparando más, pero también estoy probando esto para el tacto, donde puedes tener solo un movimiento para trabajar si deslizas muy rápido. – treznik
Estoy de acuerdo con @treznik, no está nada claro en su código cómo obtiene el valor de la variable "tiempo". – S4M
Muestrelo en jsfiddle @connor – ShibinRagh
var timestamp = null;
var lastMouseX = null;
var lastMouseY = null;
document.body.addEventListener("mousemove", function(e) {
if (timestamp === null) {
timestamp = Date.now();
lastMouseX = e.screenX;
lastMouseY = e.screenY;
return;
}
var now = Date.now();
var dt = now - timestamp;
var dx = e.screenX - lastMouseX;
var dy = e.screenY - lastMouseY;
var speedX = Math.round(dx/dt * 100);
var speedY = Math.round(dy/dt * 100);
timestamp = now;
lastMouseX = e.screenX;
lastMouseY = e.screenY;
});
Por favor agregue alguna descripción a su código. ¿Por qué crees que es una respuesta? ¿Las respuestas anteriores son incorrectas o ineficientes? ¿O tal vez quieres mostrar un enfoque diferente al problema? Publicar solo un bloque de código no es una respuesta. – Artemix
Esto es más correcto en lugar de usar intervalos. En cada iteración (excepto la primera) conoceremos la velocidad. Cuando usamos intervalos tenemos velocidad promedio (en este intervalo). – verybadbug
Este es un método para contrarrestar el hecho de que podría iniciar el seguimiento, hacer una pausa y luego mover el dedo o el ratón muy rápidamente (supongamos un movimiento repentino de un toque pantalla).
var time = 200
var tracker = setInterval(function(){
historicTouchX = touchX;
}, time);
document.addEventListener("touchmove", function(){
speed = (historicTouchX - touchX)/time;
console.log(Math.abs(speed));
}, false);
He hecho esto solo con el touchX en este ejemplo. La idea es tomar una instantánea de la posición x cada 200 milisegundos, y luego tomar eso de la posición actual y luego dividir entre 200 (velocidad = distancia/tiempo). Esto mantendría una nueva actualización de la velocidad. El tiempo es milisegundos y la salida sería el número de píxeles recorridos por 200 milisegundos.
Aquí está el fragmento completo: https://gist.github.com/ripper234/5757309 – ripper234
¿Esta solución solo rastrea la distancia del mouse? ¿Por qué la distancia es la máxima diferencia de las coordenadas xey y no la suma de los cuadrados de las diferencias? Y es 'mrefreshinterval' un atributo" predefinido "? No veo cómo lo usas. Gracias. – Dambo